React Selection Controls
Checkbox, RadioGroup, and Switch — built on real native inputs (visually hidden, mirrored by drawn controls via peer classes), so forms submit, labels click, screen readers announce, and keyboard focus behaves exactly like the platform. Checkbox supports the indeterminate parent-of-partial-selection state; radios and checkboxes take an optional description line; Switch uses role="switch".
Deliverables
Temperature grade
Build options
Installation
npx shadcn@latest add selection-controls.json
Usage
Loading...
Props
Checkbox / Switch
Native <input> attributes (checked, defaultChecked, onChange, disabled, …) plus:
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label rendered beside the control |
| description | string | — | Secondary line under the label |
| indeterminate | boolean | false | Checkbox only — mixed/partial state |
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Shared input name for the group |
| options | RadioOption[] | — | { value, label, description?, disabled? } |
| value | string | — | Selected value |
| onChange | (value: string) => void | — | Selection callback |
| label | string | — | Accessible group label |