Radio

Radios are used to select a single option from a group of mutually exclusive choices, commonly found in forms, settings, and preference panels. Unlike Checkboxes which allow multiple selections, radios ensure only one option can be selected at a time within each group.

Type Component

Tier Global

Documentation Status Minimal

Last Edited 13.02.2026

Open in Figma View on GitHub

Usage

Radio buttons are ideal for presenting 2-7 mutually exclusive options where users need to see all choices simultaneously to make an informed decision. Always provide a logical ordering such as frequency of use, alphabetical arrangement, or importance, and ensure labels are clear and follow parallel structure. Avoid negative phrasing when possible, and never use a single radio button in isolation – they must always appear in groups. For required fields, include a sensible default selection, while optional radio groups can start with no selection.

Remember that unlike Checkboxes which allow multiple selections, radio buttons enforce a single choice within each group and typically require explicit confirmation through a save or submit action.

When to use

• Single selection from 2-7 mutually exclusive options
• When all available choices should be visible at once
• For decisions where users benefit from comparing options side-by-side
• In forms where explicit confirmation is required before changes take effect

When not to use

• For yes/no or binary on/off states (use Checkbox or Switch instead)
• When multiple selections are needed (use Checkboxes)
• For large option lists with 8+ choices (consider Select)
• For settings that should apply changes immediately (use Switch)
• For single standalone options (always group radio buttons)