Resources
Related Guidelines
Appearance and behavior
-
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.

Responsive behavior
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.
Examples