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. The users should never wonder what the choices mean.
Have less than 8 options. If you have more options, or the list of options might increase dynamically with time, consider using a Select component instead to avoid screen clutter.
Be sorted the way 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 would fit the most frequent use case. If there is a default option, it should be the first on the list.
Form a meaningful sentence when reading together the label and the selected item.
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 couldn’t be localized due to its language-dependency.
Large number of options. Use Select component instead.
Overlapping choices. e.g. "Age of contacts:" "0-18" and "18-35" - Where will be 18 years olds sorted?
Horizontally aligned items, because they can make the affiliation of buttons and labels indistinct.
Using Radio Button for triggering action.
For selecting between two items, like on/off. Consider using the Switch component instead.

Radio Button labels should: