Radio
A common interactive control for users to make a single selection.
Page sections
Type
Default
Usage
Radios are used in forms when users must make a single selection among multiple choices.
Use for a small set of choices
Avoid using Radios for items that have many choices. If you have over six choices, consider using a dropdown.
Behavior
Never use a single Radio as a toggle-able control, such as, "I agree to the terms and conditions"
Avoid using multiple Radios for either-or options as you would a switch
Visual style
Always keep radios top-aligned to the first label line when the label wraps to multiple lines
Never change the layout to have the radio on the right side of the label
Always include an icon for errored Radios
Always maintain 16px between Radio options
Content strategy
- Consider copy that accompanies checkboxes “body copy”
- Generally, make actionable
- Follow normal casing, grammar, and punctuation practices (e.g. use a period for full sentences)
- Adhere to parallel syntax when authoring multiple checkboxes on a single page / screen
Accessibility
Characteristics
- Checked
- Unchecked
- Partially checked for Radio with sub (child) options
- User clicks label to check radio button
Keyboard/focus expectations
- Receives keyboard focus when tabbed or arrowed to
- Check/uncheck by pressing Spacebar or automatically checked when arrow keys are utilized to navigate radio
Screen reader expectations
- Radio label is announced Ex. “Yes, radio button,…”
- Current state is announced Ex. “…checked 2 of 2.”