When to use
Use when the user must pick exactly one option from 2–4 visible choices.
Loading…
Find components, patterns, tokens, and docs
Documentation
Radios make every option visible so comparison is cheap.
Keep the set small. Preselect a sensible default when one exists.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use when the user must pick exactly one option from 2–4 visible choices.
Use select for long lists. Use checkbox when more than one option can apply.
Removes the cost of opening a menu just to compare a handful of choices.
Wrap in a radiogroup with a visible legend. Arrow keys should move selection.
<Radio
variant="primary"
size="medium"
>
Email
</Radio>