Radio button
A common interactive control for users to make a single selection.
Type
Default
Usage
Radio buttons are used in forms when users must make a single selection among multiple choices.
Use for a small set of choices
Avoid using radio buttons for items that have many choices. If you have over six choices, consider using a dropdown.Behavior
Never use a single radio button as a toggle-able control, such as, "I agree to the terms and conditions"
Avoid using multiple radio buttons for either-or options as you would a switchVisual style
Always keep radio button 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 radio buttons
Always maintain 16px between radio optionsEditorial
- 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 button.
Screen Reader Expectations
- Radio label is announced Ex. “Yes, radio button,…”
- Current state is announced Ex. “…checked 2 of 2.”