Radio Button
A Radio Button component allows users to select one option from a set of predefined choices, ensuring clear, mutually exclusive selections with immediate feedback.
- Overview
- Specs
- Guidelines
Component
A Radio Button is a UI element used for selecting a single option from a set of mutually exclusive choices. Visually represented by a small circular button that can be filled or unfilled, Radio Buttons offer clear access and immediate feedback to users.
When selected, the button is filled in, providing a visual confirmation of the user’s choice. To ensure accessibility, Radio Buttons should be navigable using keyboard inputs and properly labeled for screen readers, which helps convey the available options and the current selection to visually impaired users.
Keyboard navigation should be supported, allowing users to navigate and toggle Radio Buttons using keys such as Tab and Spacebar.
- Radiobutton
- Add-On
- Label
- Tooltip
Used for:
Single selection from multiple options
Radio Buttons are ideal when users need to select a single option from a list of mutually exclusive choices. This ensures that only one option can be selected at a time.
Visibility of all options
Radio Buttons are appropriate when it’s important for users to see all available options at once. This visibility helps users make informed decisions quickly without having to navigate through drop-down menus.
Immediate selection feedback
Use Radio Buttons when it’s beneficial to provide immediate feedback upon selection. This is useful in scenarios where the selection triggers immediate changes or updates in the UI.
Contextual relevance
When the context requires a single choice that directly impacts the user’s experience or the application’s behavior, Radio Buttons provide a clear and precise way to capture the user’s selection.
Don’t use for:
Multiple selections needed
Radio Buttons are designed for single selections from a group of options. They are not suitable when users need to select multiple options simultaneously. For such cases, checkboxes are more appropriate.
Dynamic and complex selections
In scenarios where the options are numerous, dynamically changing, or hierarchical, Radio Buttons can become unwieldy and clutter the interface. Drop-down menus or other advanced selection controls can better handle complex selections.
Infrequent or optional choices
When the selection is optional or infrequent, a checkbox might be more appropriate. Radio buttons imply that a choice must be made from the options displayed, thus, for optional selections, using a checkbox or a different control can reduce user confusion.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated typography;
- Updated icon font;
- Updated colors;
