components / radio-group
radio-group.
single-choice group with a proper roving tabindex — arrows move focus and selection, wrap at the ends and skip disabled options, and the group is one tab stop. "cards" variant adds a description line and a trailing meta slot for choosing between things rather than values.
what for
installation
bunx @justin06lee/chrome@latest add radio-groupprops
| name | type | default | description |
|---|---|---|---|
| value * | T | null | - | selected value; null for nothing chosen. |
| onChange * | (value: T) => void | - | |
| options * | RadioOption<T>[] | - | { value, label, description?, meta?, disabled? }. description and meta render in the "cards" variant only. |
| label | ReactNode | - | mono uppercase caption above the group. |
| variant | 'list' | 'cards' | 'list' | 'cards' pads the rows out and shows description/meta. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | |
| ariaLabel | string | - | accessible name when there is no visible label. |
| disabled | boolean | false | disables every option. |
| className | string | - |