forms contract

Radio

Mutually exclusive choice within a RadioGroup. Use ≤5 options; for more, use Select.

Variants

  • default
  • card

Sizes

  • sm
  • md
  • lg

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.

Get the Radio contract in your project.