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.
![Radio button UI examples](https://framerusercontent.com/images/NWilBrFPVlcXOVX603lrcOGm6dM.png)
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.
![Radio button component UI Design anatomy](https://framerusercontent.com/images/yEk561R4llQv4anJzTeS1wCd1Bo.png)
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.
![Radio button component UI Design Enabled state](https://framerusercontent.com/images/fTkccLtUEHKbUtsuymquLcoyVRU.png)
Enabled: The default state where the Radio button is fully interactive.
![Radio button component UI Design Hovered state](https://framerusercontent.com/images/Lmj2EjbtladLtn4d2vj4yHHR2p0.png)
Hovered: Indicates the Radio button is interactive when a user’s pointer is over it.
![Radio button component UI Design Focused state](https://framerusercontent.com/images/XLWtoNt1CCmipfkWsCTCKU0Sao.png)
Focused: Highlights the Radio button when navigated to via keyboard.
![Radio button component UI Design Pressed state](https://framerusercontent.com/images/GSiK6PYpERzlV6OuiTIiPYmvBs.png)
Pressed: Shows the Radio button being clicked or tapped.
![Radio button component UI Design Desabled state](https://framerusercontent.com/images/OvAXSae9F7sISiNCk8vML7q1GUg.png)
Disabled: Indicates the Radio button is not interactive.
![Radio button component UI Design Error state](https://framerusercontent.com/images/DZTnqls4FsApYVsNaNzW5QKm6AI.png)
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.
![Radio button component UI Design Usage example Settings](https://framerusercontent.com/images/KiYWrzLvYzORLtaJ9NfgivcZnc.png)
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.
![Radio button component UI Design Usage example Surveys](https://framerusercontent.com/images/9k0ELLnfsnvU3Hg7nEOcIp3as3Q.png)
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.
![Radio button component UI Design vs Checkbox vs Switch](https://framerusercontent.com/images/rKfs0RGiBrUMkkr6O5GG9kqef8.png)
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.