Select
Overview#
Selects allow the user to choose from predefined options.
Design Guidelines#
Use when#
- To select from 4+ predefined options
- In forms
- To enter data
Don't use when#
- For navigation Use dropdown.
Select Labels#
- Labels should have a short description of the requested input (1-3 words).
- Labels should be written in sentence case (the first word capitalized, the rest lowercase).
- Avoid punctuation and articles ("the", "an", "a").
- Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.
Select Options#
- Have a default option selected whenever possible.
- Start with "Select" as a placeholder if there is not a default option.
- Be listed alphabetically or in another logical order so options can be found easily.
- Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option.
- Be clearly labelled based on what the option will do.
Examples
Basic
Preview examples in Storybook
- Default option for selecting a single value from the list of options.
Disabled
Preview examples in Storybook
- Use for selections that are currently unavailable. The surrounding interface should make it clear why the select is disabled, and how to activate it.
Loading
Preview examples in Storybook
- Use when loading options.
Option Group
Preview examples in Storybook
- Use when categorization of options is required.
Multiple
Preview examples in Storybook
-Use when multiple options can be selected.
Behaviour
- Always disable unavailable options instead of removing them.
- Always open selects on
click. - Always close menus after a menu item is clicked unless the multiple options is in use.
- Never open selects on
hover.
Related components
- If there are fewer than 4 predefined options, Use radio.
- If the intent is navigation vs data entry, Use dropdown.