# PropertySelection

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



PropertySelection tracks selection state using a boolean property on each record. When an item is selected, its `selected` property (or custom field) is set to `true`.

## When to Use

- Checkbox-based selection where each row has a checkbox
- When selection state should be saved with the data
- When you need to easily filter or count selected items
- Scatter graphs and other charts with selectable points

## Example

```tsx
import { createModel } from "cx/data";
import { PropertySelection, Controller } from "cx/ui";
import { Grid, Checkbox } from "cx/widgets";

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

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

const m = createModel<PageModel>();

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

export default (
  <div controller={PageController} class="flex flex-col gap-4">
    <Grid
      records={m.items}
      selection={{
        type: PropertySelection,
        multiple: true,
      }}
      columns={[
        {
          items: <Checkbox value={m.$record.selected} />,
          align: "center",
          width: 30,
        },
        { header: "Name", field: "name" },
      ]}
    />
    <div class="p-3 bg-muted rounded text-sm">
      <strong>Store content</strong>
      <pre
        class="mt-2"
        text={(data: any) => JSON.stringify({ items: data.items }, null, 2)}
      />
    </div>
  </div>
);

```

## Configuration

| Property        | Type      | Default      | Description                                               |
| --------------- | --------- | ------------ | --------------------------------------------------------- |
| `selectedField` | `string`  | `"selected"` | Field name on each record that stores the selection state |
| `multiple`      | `boolean` | `false`      | Enable multiple selection                                 |
| `toggle`        | `boolean` | `false`      | Enable toggle mode (clicking selected item deselects it)  |