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 "http://localhost:3000/registry/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 |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.