forms contract
Radio
Mutually exclusive choice within a RadioGroup. Use ≤5 options; for more, use Select.
Variants
- default
- Circle 16pt
- card
- Each option is a Card with the radio in the corner — for rich descriptions
Sizes
- sm
- 14pt
- md
- 16pt (default)
- lg
- 20pt
Example
<RadioGroup value={plan} onChange={setPlan}><Radio value="monthly">Monthly</Radio><Radio value="yearly">Yearly</Radio></RadioGroup>Usage rule
role="radiogroup" on the parent + role="radio" on each option (use a fieldset/legend or Radix RadioGroup).
The full Radio contract has 4 more rules, plus the do-not patterns. Get the full recipe.