Radio Button
A common input control for users to select only one option from a number of choices.
Types
Default
Usage
Use for forms where users can choose a single item from a group of options.
Radio Button groups should always have a Section Title that clearly defines or explains what the grouped options are for
Use for a small set of choices
Avoid using Radio Buttons for items that have many choices. If available options can be collapsed, consider using an Exposed Dropdown Menu
Never use a single Radio Button as a toggle control, such as, “I agree to the Terms and Conditions”
Avoid pairing with other interactive elements, such as a tooltip or link
Visual Style
Always maintain 48dp minimum hit area for each option
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.
Titles
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.
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 checks/unchecks the Radio Button
- Label clearly identifies purpose for Radio Button
Keyboard/Focus Expectations
- Enabled Radio Buttons receive focus when tapped and with keyboard navigation
- Tap or return/spacebar checks/unchecks the Radio Button
Screen Reader Expectations
Reading Order
- Not checked/checked, “label”, “Radio Button group label”, Radio Button
- If disabled: not checked/checked, “label”, “Radio Button group label”, Radio Button, disabled