Radio Button
Usage
When to Use
Use radio buttons to allow users to select one option out of 2 to 5 mutually exclusive options.
When Not to Use
If you offer five or more options, use a select field instead.
If you offer three or fewer options with relatively short labels, use a switcher instead.
If users should be able to select multiple options, use checkboxes instead.
Content
Labels
Use clearly distinguishable labels. Don’t make choices overlap, and don’t forget about choices.
Use short and descriptive labels that fit in one line.
Group Labels
Add a group label if it enhances comprehensibility. Radio button groups should make sense in isolation. They should not need further context to be understandable.
Add a group label if all checkboxes begin with the same word(s).
Use the singular form for group labels. This helps users to understand that only one option is selectable.
Use sentence-style capitalization for all labels, including group labels.
Structure
Always keep the logical order of your options. If it doesn’t interfere with the logical order, additionally order the options according to the following rules:
Most likely to least likely to be selected option
Simplest to most complex option
Least to most risky option
Always offer a default selection. If none of the buttons is selected by default, users have no way to revert to the original state after they’ve made a selection. Use the safest or most private option as default. If security is not a factor, use the most common option. (NNGroup, Radio Buttons: Select One by Default or Leave All Unselected?)
Layout
Use 4 pixels of spacing for vertical alignment.
Generally, avoid horizontal alignment of radio buttons. If you can’t avoid it, use 16 pixels of spacing.
