Radio select
Radio buttons allow users to input data by selecting one option from a given set of options.
Usage guidelines
When to use
Radio buttons, as well as checkboxes and switches, are most commonly used in forms, but also in filter menus. In particular:
- Use radio button if only one option in a group of items can be selected.
When not to use
- Do not use when more than a single option can be selected (or none). Use checkbox instead.
- Do not use if the selection has to be made between two distinct and opposite states, such as "On" and "Off". Use switch instead.
Writing guidelines
Labels
- Radio buttons always include a label. Although the length of the label can vary according to the context, always keep it concise and direct.
Group titles
Radio buttons are always found in groups. Give a title to a group of controls in case the content is not immediately self-explanatory.
Capitalization and case
Write labels in sentence case and without punctuation.
Text overflow
In case of overflow, text wraps to another line.
Specifications
Anatomy
- Radio button input: Indicates wether an option is selected or not and its state. One option is always selected by default.
- Radio button label: Describes the option to select or unselect.
- Radio group: radio buttons are always grouped.
Size
Radio buttons come in one size.
Styling
Radio button is available for both dark and light theme.
Two variants are available: “Shape” and “Outlined”. Take into account factors such as contrast with the background and balance with other elements of the UI when choosing the variant to use.
Styling for this component also depends on whether items are selected or unselected.
Behavior
Positioning
Radio buttons are most often found in forms but can also be part of filter menus or tables.
Alignment
Radio buttons are left-aligned in the container they are placed in.
Grouping
When grouped, radio buttons can be laid out vertically or horizontally. If you include a group title and helper text, use caption text style.
| Use case | Alignment | |
|---|---|---|
| Vertical grouping | It is advised to stack radio buttons vertically for better readability. | Leave a 16px spacing between each element of the group. |
| Horizontal grouping | Depending on the case, radio buttons can be laid out horizontally. | Leave a 32px space between each items. |
| Multiple columns | Depending on the case, items can span over two or three columns | Align columns to the grid. |
Interaction
Apart from being selected, unselected or indeterminate, radio buttons come in five possible states: inactive hover, focused, disabled and error.
Radio buttons come with one option selected by default (typically the first one). Options are mutually exclusive, so only one can be selected. If you need an unselected state, remember to add a "None" option.
To select or deselect an option, simply press on the input or label.
Accessibility guidelines
Design considerations
Make sure there is enough contrast between selection controls color and the background.
For a more accessible experience:
- Keep labels concise and direct.
- Consider adding group titles and helper text to provide additional information. - Keep in mind that if you decide to not show the label, one is always needed in code anyway.
- List option in a logical way.
Keyboard interaction
- Tab: to navigate between options.
- Space: to select the focused item.