Radio

Overview

Radio is a single-selection control for choosing exactly one option from a set. With 5 semantic variants, 3 sizes, and full interaction state coverage, it adapts to every form context, surface, and validation scenario, with token-driven styling that stays in sync with your theme.

When should you use them?

Use a radio button when a user must choose exactly one option from a small, visible set of mutually exclusive choices, like a shipping method, a plan tier, or a yes/no preference. When more than one selection is allowed, use checkboxes instead.

How should you use them?

• Use radios for mutually exclusive options; use checkboxes when multiple choices are allowed.
• Always present radios as a group of two or more, never a single radio on its own.
• Pre-select a sensible default when one option is clearly the most common.
• Keep each option's label short and parallel in structure.
• Match the variant to context: Danger for risky choices, Success for confirmations.
• Keep the group keyboard-navigable with arrow keys, following native radio behavior.