Components
Checkbox Select
Multi-select group of options, as a plain list or selectable cards — built on native checkbox inputs for full keyboard and screen-reader support.
Behavior
Checkbox Select renders a role="group" over native <input type="checkbox">
elements (visually hidden), so keyboard, focus, and screen-reader semantics are
native. Any number of options can be selected; value is the array of selected
values.
| Key | Action |
|---|---|
Tab | Move focus to the next option |
Space | Toggle the focused option |
The card variant styles each option as a bordered, selectable surface; the
list variant is a compact stack. Disabled options are dimmed and non-toggleable.
Usage
import { CheckboxSelect } from '@cajon-ui/react';
const [values, setValues] = useState<string[]>(['option-1', 'option-2']);
<CheckboxSelect
aria-label="Card example"
variant="card"
options={[
{ value: 'option-1', label: 'Option 1', description: 'Description for option 1' },
{ value: 'option-2', label: 'Option 2', description: 'Description for option 2' },
]}
value={values}
onChange={setValues}
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
options | CheckboxSelectOption[] | — | { value, label, description?, disabled? } choices, in display order |
value | string[] | — | Currently-selected values (controlled) |
onChange | (value: string[]) => void | — | Called with the next selected-values array |
variant | list | card | list | Plain rows, or bordered selectable cards |
aria-label | string | — | Accessible label for the group |