Radio
Radio buttons allow users to select one option from a set. They are typically accompanied by labels and can display additional support messages to provide context or instructions.
Overview
Radios are designed to make single-option selections straightforward, avoiding confusion by presenting a direct choice mechanism with only one possible selection at a time.
When to use
Use radio buttons when you need the user to select only one option from multiple choices, such as for preferences or form inputs.
Employ radio buttons when each option is mutually exclusive, and only one can be chosen at any given time.
Best for forms with straightforward, easy-to-understand choices, where you want to avoid the complexity of checkboxes.
When not to use
Do not use radio buttons if users need to select more than one option—use checkboxes instead for multiple selections.
Avoid radios when options require more than a simple choice or when options are too detailed, making other input components like dropdowns more appropriate.
If you want to enable or disable a setting, a switch switch may be more intuitive than a radio button.
Types
Anatomy
Radio Base: The clickable area where the user selects the option.
Icon Leading: A visual icon that can be optionally placed on the left to reinforce the meaning or category of the choice.
Text: The label or name associated with the radio button, providing context to the user.
Icon Trailing: An optional icon placed on the right of the text to add further clarification or action.
Inline Message: Placed beneath the Radio to offer further details about the function or effects.
States
Size
Small
14
16
Medium
16
20
Accessibility
Keyboard Navigation: Radio buttons should be fully navigable via keyboard controls, with focus indicators clearly visible, allowing users to move through options using arrow keys.
Screen Reader Compatibility: Ensure radios are appropriately labeled and include aria attributes so that users with screen readers can understand and navigate the options.
Clear Visual Feedback: The selected state of the radio button should be visually distinct, and the click area should be large enough to accommodate all users.
Consistency Across Platforms: Radio button behavior should be consistent across all devices and browsers, maintaining the same interaction patterns for accessibility purposes.
Example
Survey Forms: Selecting one answer from multiple survey questions, such as rating satisfaction.
Product Selection: Choosing between different product models or packages. Preference Settings: Selecting a default option in user settings, such as language or theme.
Payment Options: Choosing a payment method during checkout (e.g., credit card, PayPal).
Shipping Method: Selecting one shipping method when multiple are available (e.g., standard vs. express shipping).
Last updated