Description
ONGOING
Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.
Usage & Behavior
Use radio buttons to:
Select a single option from a list
Expose all available options
General guidelines
Structure
A radio button consists of:
A label describing the option
A corresponding radio button
States
The radio button allows 2 modes:
 | Checked |
 | Unchecked |
For each if the modes, you can find the different states below:
Interaction
The user clicks a radio button to activate the related option. Clicking an activated option does not deactivate it, but clicking a different option transfers activation to that option.
A user can select only one option from a group of radio buttons.
A group of radio buttons behaves like a single control: Using ‘tab’ focuses on the group container, but users can cycle through the group using the arrow keys.
The radio will have an hovered/active state when hovering/clicking both the radio or the label describing it.
Validations and errors
Please refer to Field validation page for more information.
Best practices
List options in a logical order:
Most likely to least likely to be selected.
Simplest to most complex operation.
Make the most likely or convenient radio button option the default.
If you need to have an unselected state, add a radio button with a None option.
If you can't have a comprehensive list of all possible options, add an Other option.
Use a radio button when the options being presented are important enough to occupy more screen space.
Do not use a radio button if:
You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
You need to present more than 8 options. Use a dropdown menu.
The default option is recommended for most users in most situations. In this case, consider a dropdown list instead, which uses less space by not showing all options straightaway.
In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
The options are numbers with fixed steps. Use a slider.
Try to avoid:
Putting things in alphabetical order because it is language dependent and not localizable.
Overlapping choices. e.g. Select age: 0-20, 20-40 - What do you pick if your age is 20?
Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you pick if you are exactly 20?
Accessibility compliance
A group of radio buttons behaves like a single control: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Current appearances in our products
Forecasting and Scheduling → Tactical Forecasts → Forecast:
