# Single Row Selection

Single row selection lets the user highlight one Grid row at a time. Enable it by setting the [`selectable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#selectable) prop with [`enabled`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridselectablesettings#enabled) set to `true` and [`mode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridselectablesettings#mode) set to `single`.

This is a good fit when users should work with one active record at a time, for example when showing details in a side panel or opening an edit form for the selected item. Use [`defaultSelect`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#defaultselect) to pre-select a row on first render without taking over selection state management.

The following example demonstrates single-row selection with a pre-selected row on load.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/selection/row-selection/func/source.txt)

## Controlled Row Selection

Use controlled selection when the selected row must survive data refreshes, paging, filtering, or other external state changes. Keep the current selection in the [`select`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#select) prop, handle [`onSelectionChange`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onselectionchange) to update it, and always set a stable [`dataItemKey`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#dataitemkey) so the selection descriptor tracks the correct row across data changes.

The following example demonstrates controlled row selection with preset buttons that programmatically set the selection and a click-to-deselect behavior implemented in `onSelectionChange`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/selection/controlled-row-selection/func/source.txt)

If you later expand the experience to multi-row selection, the same controlled pattern applies. For examples that combine controlled selection with grouping, paging, and filtering, see the [multi-row selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/multi-row-selection) article.

## Checkbox Selection

Use checkbox selection when row clicks are reserved for another action such as navigation, editing, or expanding a detail row. Adding a checkbox column makes the selection intent unambiguous.

To configure checkbox selection:

1. Add a [`Column`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumn) with `columnType="checkbox"` as the first column.

2. Configure [`GridSelectableSettings`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridselectablesettings) on the Grid:

   ```jsx
   selectable={{
       enabled: true,
       drag: false,
       cell: false,
       mode: 'single'
   }}
   ```

3. Handle [`onSelectionChange`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onselectionchange) and [`onHeaderSelectionChange`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onheaderselectionchange) and update the `select` state with `event.select` in both handlers.

In `single` mode the header checkbox is not shown as a select-all control. Switch `mode` to `multiple` to enable select-all and range selection — see the [multi-row selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/multi-row-selection) article for those patterns.

The following example demonstrates single checkbox selection where both row clicks and the checkbox column toggle the selected row.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/selection/checkboxes/func/source.txt)

## Persisting Checkbox Selection State

Persisting the selection state is useful when users leave and return to the page, or when you need to preserve their working context across refreshes. Store the selection descriptor rather than the entire data item so the selection can be reapplied efficiently after the data is loaded again.

This example demonstrates how to persist and restore selection state by storing the selection object in `localStorage`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/selection/persisting-checkbox-selection/source.txt)

## Suggested Links

* [Selection Overview](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection)
* [Cell Selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/cell-selection)
* [Multi-row Selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/multi-row-selection)
* [Persisting Multiple Rows Selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/multi-row-selection#persisting-multiple-rows-selection)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/grid)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)