...
- 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?
- 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.
- 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.
- You need to present more than 8 options. Use a dropdown menu.
- 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.
States
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: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.
Validations and errors
<<used for specific components e.g. slider>>
Best practices
...