Radio Button Guidelines

Use Radio Buttons to let users select a single item out of a set of options.

Best Practices

Radio buttons should:

Let the user select only one choice from a list of options.
Be aligned vertically, because it clarifies the connection between the options but separates the items visually.
Have their labels positioned on the right side of the selectors.
Let users select an option by clicking on either the button itself or its label.
Have a clear group label that describes what the selection is about.
Be clearly labelled with a few words in a single line of text. Users should never wonder what the choices mean.
Have less than 8 options. If you have more options, or the list might increase dynamically, consider using a Select component instead to avoid screen clutter.
Be sorted to follow an intended logic, like:
- Most frequently used to least frequently used
- Least to most risk
- Least to most effort or cost
Optimally have a default choice that fits the most frequent use case. If there is a default option, it should be first in the list.
Form a meaningful sentence when reading the label and the selected item together.
Activate an error message under the radio field if no option is selected from a mandatory radio button list.
Expose its effect only after validation. There are components that trigger real-time actions.

Try to avoid:

Sorting items in alphabetical order. It can't be localised due to language dependency.
Large numbers of options. Use a Select component instead.
Overlapping choices, e.g. "Age of contacts: 0–18" and "18–35" — where would 18-year-olds be sorted?
Horizontally aligned items, because they can make the affiliation of buttons and labels indistinct.
Using Radio Button for triggering actions.
Using Radio Button for selecting between two items like on/off. Consider using the Switch component instead.

Radio Button labels should: