# SimpleSelection

```ts
import { SimpleSelection } from 'cx/ui';
```



SimpleSelection is the most basic selection model. It stores the entire selected object in the bound variable. Only single selection is supported.

## When to Use

- Simple single-select scenarios
- When you need immediate access to the full selected object
- Quick prototyping or simple lists

Note that selection is lost if the selected object changes in the data source, since the reference will no longer match. For more robust selection, consider [KeySelection](./key-selection).

## Example

```tsx
import { createModel } from "cx/data";
import { SimpleSelection, Controller } from "cx/ui";
import { List } from "cx/widgets";

interface Item {
  id: number;
  name: string;
}

interface PageModel {
  items: Item[];
  selection: Item;
  $record: Item;
}

const m = createModel<PageModel>();

class PageController extends Controller<PageModel> {
  onInit() {
    this.store.init(m.items, [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Cherry" },
      { id: 4, name: "Date" },
    ]);
  }
}

export default (
  <div controller={PageController} class="flex flex-col gap-4">
    <List
      records={m.items}
      selection={{
        type: SimpleSelection,
        bind: m.selection,
      }}
    >
      <div text={m.$record.name} />
    </List>
    <div class="p-3 bg-muted rounded text-sm">
      <strong>Store content</strong>
      <pre
        class="mt-2"
        text={(data) => JSON.stringify({ selection: data.selection }, null, 2)}
      />
    </div>
  </div>
);

```

## Configuration

| Property | Type        | Default | Description                                              |
| -------- | ----------- | ------- | -------------------------------------------------------- |
| `bind`   | `Prop<any>` | —       | Binding for the selected object                          |
| `toggle` | `boolean`   | `false` | Enable toggle mode (clicking selected item deselects it) |