Radio Buttons
A radio button allows only one item to be selected at a time, indicated by a filled color. They are used for singly exclusive selections rather than multiple options. When a user selects a new item, the previous selection is disabled.
Types
Each radio button has three states equivalent to on and off switches: unselected, selected, and indeterminate.
Guidelines
In cases where you need to present your users with a choice, but only one choice can be selected at a time, radio buttons are the best solution.
Anatomy
- Label
Indicates which information you wish to select or unselect. - Input
Radio button inputs indicate the appropriate state. It is unfilled by default. - Field label (optional)
Describes what needs to be selected.
Alignment
The labels of the radio buttons are placed next to their inputs. If there is a radio buttons grouping, it depends on the use case and UI layout whether they should be arranged vertically or horizontally. The checkbox and radio button groupings should ideally be arranged vertically to make reading them simpler.
Interaction
Radio buttons are toggled on and off by clicking the primary mouse button.
Specifications
These specifications can be used by designers and developers to create radio buttons that are pixel-perfect.
Do
- Allow only 1 choice from the list to be selected at a time.
- Use sentence case, with only proper nouns capitalized.
- Write as sentence fragments with no ending punctuation.
Don't
- Use a single radio button on its own.
- Use title caps for the labels.
- Include terminal punctuation at the end of a label.