Radio
Single choice from a set, grouped with RadioGroup
Category: inputs · WCAG 2.2-AA · form, choice, group
States
- unchecked
- checked
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control. |
value | string | — | The controlled value. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
name | string | — | Form field name shared by the radio group. |
ariaLabel | string | — | Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is **visible**; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this. |
Design tokens
--cascivo-color-surface--cascivo-color-accent--cascivo-color-border-strong--cascivo-color-text-on-accent--cascivo-radius-full--cascivo-focus-ring
When to use
- Choosing exactly one option from a small, mutually exclusive set (roughly 2–6) where all options should stay visible
- Form fields where the choices need plain text labels and a familiar radio affordance
When not to use
- Selecting one of many options where showing them all is impractical — use Select
- Each option needs a title plus description or richer layout — use RadioCard
- A compact inline switch between a few views or modes — use SegmentedControl
How to build an accessible Radio in React →
Examples
Group
<RadioGroup name="plan" defaultValue="pro"><Radio value="pro" label="Pro" /><Radio value="team" label="Team" /></RadioGroup>Related components
- RadioCard — Use when each option needs a title, description, or card layout
- SegmentedControl — Use for a compact inline single choice among a few options
- Select — Use when there are too many options to show inline