You need to show two or more choices, and users can only select one. That’s when you use radio buttons.
Use radio buttons when you want users to select only one option from a few defined, displayed choices. Common examples include choosing marital status (marrried, single) or work schedule (full-time, part-time).
Appearance and behavior
Here are some examples of what radio buttons can look like.
- The default view displays all available options.
- We can add a label or instruction to guide the user to select.
- We can disable some choices if they’re not available to that customer.
- We can display the choices with a default option selected to encourage the customer to act.
- The inline version displays options horizontally.
- An asterisk at the end of the label can let users know they need to make a selection.
- A tooltip can emphasize that users need to make a selection.
With additional label
With a disabled option
With a default value selected
(encouraging the user to select Radio 1)
With Required Validation
With Required Message
Checkboxes and radio buttons exist across devices, just with bigger tap targets for touch inputs. Switch buttons and segmented controls remain the same as on desktop. Select menus, on the other hand, use mobile-optimized views. In these cases, tapping on the control opens a full-page modal with selections presented. Type ahead selects do the same, but provide an option to type in the modal with suggestions.
Content guidelines for radio buttons
- Present listed choices and labels in sentence case (examples: New invoice, Select an option).
- Use title case for proper nouns (examples: Bank of America, John Smith).
- Avoid punctuation in the listed options.
- Keep word count to a minimum.
- When possible, make options verb phrases (examples: Revise invoice, Create new).
- Be specific about what is going to happen when the user makes a selection.
- Never write Click here. The correct verb is select. Example: Select your term.
- Recommended voice and tone attribute: straightforward, encouraging
- States: disabled, default, hover, disabled, selected, (focused coming soon)
- Outer shape: size, stroke color and size (1 px), default, and disabled color
- Inner shape: size, default, and hover Color
- 12 px width between radio button/checkbox and label
- 20 px height between radio button and options copy
- 32 px height between text description and top of radio group
- Radio buttons should not indent
- First line of text is center aligned to radio button
- Label text
- Avenir Next (for Intuit) Light
- 16 px font, #6B6C72
- Label text/entire radio button row isselectable as well as radio option (forusability)