One choice from a visible set.
| Prop / event | Type | Notes |
|---|---|---|
| value (group) | string | The one selected value |
| onChange | (next) => void | Fires when a new option is chosen |
| Arrow keys | — | Move selection within the group |
| size / disabled | l·m·s / boolean | 22/18/15px |
| role="radiogroup" | a11y | One tab stop; arrows navigate inside |
Exactly one selected, always. If zero can be valid, or more than one, use Checkbox instead.
Use for two-to-five mutually exclusive options, all visible at once.
Don't use a lone radio. A single on/off is a Checkbox or a Toggle.
Add a description when options differ in ways the label can't hold.
Don't stack a dozen radios. Past ~6 options, reach for a Dropdown.
Pricing tiers, one selected, all comparable at a glance.
Appearance and other one-of-N preferences.
Two short options can sit inline on one line.
| Token | Value | Role |
|---|---|---|
| --rd-size-l/m/s | 22 / 18 / 15px | Ring dimension |
| --rd-dot | 50% | Dot as a fraction of the ring |
| --rd-border | #33333A | Unselected ring |
| --rd-on | #FF7A00 | Selected ring & dot |
| --rd-ease | cubic-bezier(.34,1.56,.64,1) | Dot spring, 0.16s |
| --rd-focus | rgba(255,122,0,.35) | 3px focus ring |
<div role="radiogroup" aria-label="Plan">
<label class="o-radio-row">
<button class="o-radio o-radio--m is-on" role="radio" aria-checked="true"></button>
<span>Pro</span>
</label>
</div>