A common input control for users to select only one option from a number of choices.
Use for forms where users can choose a single item from a group of options.
The overall content goal of Radio Button is to present a set of selections with appropriate scope and style for the screen’s context.
Because Radio Button appears in sets, titles should be used to introduce the selections. Think of titles 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.
- 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.
Radio Button can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.
- One Radio Button can be checked per group
- Tapping label or icon checks/unchecks the Radio Button
- Label clearly identifies purpose for Radio Button
- Enabled Radio Buttons receive focus when tapped and with keyboard navigation
- Tap or return/spacebar checks/unchecks the Radio Button
Screen Reader Expectations
- Not checked/checked, “label”, “Radio Button group label”, Radio Button
- If disabled: not checked/checked, “label”, “Radio Button group label”, Radio Button, disabled