Radio Buttons
Radio Buttons are selection controls used when the user must choose exactly one option from a predefined list. Unlike checkboxes, radio buttons are mutually exclusive within a group: selecting one option automatically deselects the others. Radio Buttons provide clear, immediate visual feedback and are commonly used in forms, settings, configuration screens, and decision-making interfaces.
Component Types
The Radio Button component supports two text configurations to match different content density levels.
1. Only Radio Button
A standalone circular radio button without any accompanying text. Ideal for compact layouts, tables, lists, or custom UI patterns. Primarily controlled by surrounding content or external labels.
2. Radio Button with Title
A radio control paired with a single-line title label. Used for simple choices or short option names. Ideal for standard forms, surveys, or preference selections.
3. Radio Button with Title and Description
A radio control paired with a title and an additional multi-line description. Used for more detailed options that require explanation. Ideal for complex settings, subscription plans, permissions, feature toggles. Helps users understand differences between similar options.
States
Radio Buttons have six visual and interactive states.
1. Default
Unselected and idle. Empty circular outline. Default or neutral color. Label text appears in standard color. Ready for interaction.
2. Default — Hovered
Displayed when the user hovers or focuses on an unselected radio button. Background becomes slightly emphasized. Indicates interactivity. No inner dot is displayed yet.
Hover over the radio buttons below to see the hover state
3. Selected
Indicates the active choice. Circular outline with a filled inner dot. Uses the system's accent or brand color. Represents the chosen option within the group.
4. Selected — Hovered
Displayed when the user hovers over a selected radio button. Background slightly highlighted. Inner dot remains visible. Reinforces that interaction is possible (e.g., selecting again has no effect).
Hover over the selected radio button below to see the hover state
5. Default — Disabled
Unselected but unavailable for interaction. Muted or gray outline. No hover effects. Label text appears in muted color. Communicates that the option cannot be selected.
6. Selected — Disabled
Selected but locked from changes. Inner dot remains visible in a muted style. Outline and dot follow disabled color tokens. No interactive states or hover effects. Used when selection is fixed or controlled by system logic.
Usage Examples
Common use cases for Radio Buttons in forms and interfaces.
Form Selection
Radio buttons in a form for selecting a single option from multiple choices.
Settings Configuration
Radio buttons for configuring application settings with clear descriptions.
Simple Option List
Radio buttons with titles only for simple selection scenarios.
Behavior & Interaction Principles
Radio buttons function within a group, and only one option can be selected at a time. Clicking anywhere on the option row (radio + text) selects the option. Selection is immediate and reversible only by choosing a different option. Keyboard support: arrows navigate, space/enter selects.
Usage Guidelines
- Use radio buttons for single-choice lists.
- For multiple independent selections, use checkboxes instead.
- Keep option labels short; use descriptions for detailed explanations.
- Do not use disabled states excessively—ensure they are meaningful.
- Show all related radio buttons together to maintain visual grouping.
- Use title + description for complex decisions or when clarity is critical.