Components
Radio Select
Single-select group of options, as a plain list or selectable cards — built on native radio inputs for full keyboard and screen-reader support.
Behavior
Radio Select renders a role="radiogroup" over native <input type="radio">
elements (visually hidden), so keyboard navigation, focus, and screen-reader
semantics come from the platform. Exactly one option is selectable at a time.
| Key | Action |
|---|---|
Tab | Move focus into the group (lands on the selected option) |
↑ / ↓ / ← / → | Move selection between options (skips disabled) |
Space | Select 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 skipped by
keyboard.
Usage
import { RadioSelect } from '@cajon-ui/react';
const [value, setValue] = useState('option-1');
<RadioSelect
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={value}
onChange={setValue}
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
options | RadioSelectOption[] | — | { value, label, description?, disabled? } choices, in display order |
value | string | — | Currently-selected value (controlled) |
onChange | (value: string) => void | — | Called with the chosen option's value |
variant | list | card | list | Plain rows, or bordered selectable cards |
aria-label | string | — | Accessible label for the radiogroup |