Overview
Radio buttons are used to afford a single selection from two or more options.
Usage
Use when
- Options are mutually exclusive.
- Visibility and quick response is a priority.
- Comparison of options needs to be clear.
- You want to emphasize options.
Don’t use when
- User can make multiple selections. Instead, use Checkboxes.
- You are providing more than 7 options.
- You are attempting to highlight a preferred choice. Instead, use a Dropdown.
- When a large number of familiar options is available.
Specifications
- Always stack radio buttons vertically. Horizontal variation should not be used.
- Uses the same
:hover
and:active
styles as the primary Button. - A set of radio buttons should not default to having one option selected.
- A heading much accompany a set of radio buttons.
|
|
Do stack options for clear visual scanning | Don’t span horizontally as it is more difficult to scan |
Behaviors
- A set of radio buttons should default to having one option selected, generally the first option. However, if pre-selection of an option results in incorrect assumptions (i.e., “Male” or “Female”) then no option should be selected by default.
- If selecting no option is a viable choice, include a radio button within the group with an appropriate label, i.e. “None”.
- A radio button’s label is part of the clickable area of the control.
Editorial
- If necessary, a heading can accompany a set of radio buttons to provide further clarity for the user. Use sentence-case (only the first word in a phrase and any proper nouns capitalized).
- Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.
Accessibility
- The radio buttons are contained in or owned by an element with role
radiogroup
. - Each radio button element has role
radio
. - If a radio button is selected, the
radio
element hasaria-checked
set totrue
. If it is not selected, it hasaria-checked
set tofalse
. - Each
radio
element is labelled by its content, has a visible label referenced byaria-labelledby
, or has a label specified witharia-label
. - The
radiogroup
element has a visible label referenced byaria-labelledby
or has a label specified witharia-label
. - If elements providing additional information about either the radio group or each radio button are present, those elements are referenced by the
radiogroup
element or radio elements with thearia-describedby
property. - Right and left arrow keys and up and down arrow keys move focus sequentially between radio button in the group. Once the focus comes to the first or last radio buttons in the group, it cycles again.
- If the focused radio button is not selected, “Space” key deselects the currently selected radio button and selects the focused radio button. It the focused radio button is selected, pressing the “Space” key does nothing.
What's Changed
Date | Version | Notes | Contributors |
---|---|---|---|
11/23/2020 | 1.0.0 | Border color changed to be accessible. White background added for emphasis. | E. Bohn, L. Kause, N. Springer |
Was this page helpful?
Thanks for your feedback!