Radio Button
A common input control for users to select only one option from a number of choices.
Types
Basic
Table Cell
Usage
Use for forms where users can choose a single item from a group of options.
Visual Style
Content Strategy
The overall content goal of Radio Button is to present a set of selections with appropriate scope and style for the screen’s context.
Section Headers
Because Radio Button appears in sets, Section Headers should be used to introduce the selections. Think of Section Headers as a tone-setter for the content that follows.
Grammar & Punctuation
- Selections should follow best practices for capitalization and punctuation. For example, more complex selections should be Sentence case, and only full sentences should receive end punctuation
- Sets, simple and complex, should adhere to parallel syntax
Actions
- Because Radio Button is inherently selectable, actions are not required to highlight that behavior
- Instead, use actions to clearly define the selection’s intent. Distinct selections are especially important for Radio Button as users can select only a single option.
Character Count
Radio Button can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.
Accessibility
Characteristics
- One Radio Button can be checked per group
- Tapping label or icon selects/unselects the Radio Button
- Label clearly identifies purpose for Radio Button
- Radio Buttons require a Section Header to act as a group label
Keyboard/Focus Expectations
- Enabled and disabled Radio Buttons receive visible focus with VoiceOver
- Tap selects/unselects the Radio Button
Screen Reader Expectations
- Reading order: “unselected/selected, {Radio Button label}, {Radio Button group label}, button”
- If disabled: “unselected/selected, {Radio Button label}, {Radio Button group label}, button, dimmed”