Radio button
Radio buttons allow users to select only one option from a set of choices, usually displayed in a group. This visual control element is used when a single selection from mutually exclusive options is required. Each option must be visible, and users are required to select exactly one. Grouping Radio buttons clarifies the exclusivity of choices.
Alternative names: radio group, option button, choice buttons, selection buttons, dot selectors.
This Blueprint explores the structure, various states, and behavior of the Radio button component, along with best practices and practical examples for its use.
Anatomy
A Radio button consists of a circular Container and a filled Circle. It should always be paired with an adjacent Label describing the selection, and optional Description. Since only one Radio Button can be selected at a time, each choice must have its own Label. Labels are crucial, though in rare cases, context may suffice if an accessibility expert has reviewed the design.
Circle: Represents the selection status of the Radio button, typically as a filled or empty circle. This is crucial for visually communicating whether an option is selected.
Container: Defines the clickable area and visual boundaries of the Radio button. It reflects the Radio button's active or inactive status through its design.
Label: Provides context next to the Radio button. The label should be legible and consistent with the interface's typography, enhancing user understanding and interaction.
Description: Offers a brief explanation of the Radio button's purpose, aiding user comprehension and supplementing the label for clearer interaction.
States
Radio button can be in two different conditions: ① Selected and ② Unselected. The Selected condition indicates that the user has chosen or activated an option, while the Unselected condition shows that there is no selection or that the setting is deactivated.
Radio button can display different states like Enabled, Hovered, Focused, Pressed, Disabled, and Error, each representing a specific interaction or accessibility status.
Enabled: The default state where the Radio button is fully interactive.
Hovered: Indicates the Radio button is interactive when a user’s pointer is over it.
Focused: Highlights the Radio button when navigated to via keyboard.
Pressed: Shows the Radio button being clicked or tapped.
Disabled: Indicates the Radio button is not interactive.
Error: Shows when there’s an issue with the selection.
Behavioral
A Radio button is selected when a user clicks or taps the icon or label. Users can toggle between options by selecting a different Radio button, which automatically deselects the previously chosen item. Interaction should not navigate users away from the current view. Only one Radio button can be active at a time, ensuring users can change their selection but cannot unselect all options.
Usage
Radio buttons are ideal for allowing users to make a single selection from a list of options. They should be presented in a structured, logical order, typically laid out vertically for clarity. They can be used in tiles, list items, dialogs, and forms.
Settings and Preferences
In settings and preferences for apps and websites, Radio buttons offer a clear way for users to choose one option from several available. This is especially useful for settings where only one choice can be active at a time.
Imagine an online store checkout where customers need to choose a payment method. Using Radio buttons, you can offer options like credit card, Apple Pay, and bank transfer. This simplifies the process for users, allowing them to select their preferred payment method without confusion over multiple choices.
Forms and Surveys
Radio buttons play a crucial role in forms and surveys by limiting responses to a single option per question. This is particularly useful for questions where only one answer is valid or preferred.
For example, if you are creating an online survey or questionnaire where respondents need to select one option from the provided choices, Radio buttons are ideal. This can be used for questions like "Which operating system do you use?" with options such as Windows, macOS, Linux, and Other. It allows for easy collection and analysis of responses since each respondent selects only one option.
Radio Button vs Checkbox and Switch
Radio buttons are one of several selection controls, suitable for scenarios requiring a single selection. Checkboxes allow multiple selections, while Switches toggle settings on or off. Use Radio buttons for up to five options, considering a drop-down menu for saving screen space, though this adds clicks and cognitive effort.
For example, imagine designing a settings page for a web app. For selecting a theme, Radio buttons would work well if offering three themes: light, dark, and auto. For choosing notification types, Checkboxes allow users to select multiple options, such as email, SMS, and push notifications. Lastly, a Switch could control whether notifications are on or off globally.
Best Practices
When designing and using Radio button components, limit options to five or fewer, providing clear, concise labels for each. Always include labels to ensure accessibility and clarity. Group related options within a defined section, often with a descriptive heading, and arrange them vertically for better readability, especially on mobile devices. Use distinct visual cues to indicate the selected option and provide contextual help for complex choices.
To delve deeper into best practices and real-world examples, explore Radio buttons component in Design Systems from leading design teams and top tech companies.