Usage
A form control used when there are more than 2 options and may require a user to select 1 option.
Anatomy
The anatomy of a dropdown select.
- Select: The form field where the user can select one option from a list
- Chevron: The chevron icon indicates there are options available in a dropdown list
- Option list: The grouping of related input options
- Option: A unique input option
- Scrollbar: A bar used to scroll to view more options
See the Design specs for detailed sizing and spacing information
Types
Grouping
- Grouping options with proper group labels can help users scan the list more easily.
Icons
- Use icons to distinguish between options.
States
Select states
Dropdown selects can display the following states: unselected, hover, focus, active, and disabled.
Option states
Within Dropdown select option lists, options can display the following states: selected, hover, and disabled.
Behavior
Sort the option list in a logical order. For instance, alphabetize or put the most selected option(s) at the top.
Open / close
- Normal behavior is to reveal the option list below the select box when there is sufficient space within the viewport to display it entirely. When lower in the viewport, the option list should reveal above the select box.
- Chevron behavior: When the option list is opened, the chevron rotates 180 degrees clockwise. When the option list is closed, the chevron spins back 180 degrees counter clockwise, returning to its original position.
- The option list will close automatically after making a selection or when the user clicks outside of the Dropdown select component.
Scrolling
- If all options can be displayed within the viewport, it is ideal to not have a scroll bar. Scroll bars should appear when option lists exceed the height of the screen, but should not be taller than 300px.
- Note: option lists will appear below or above the select boxes depending on where they sit within the viewport. (See Open / close)
Typeahead
- Present in all dropdown selects, streamlines experience for users.
- Typeahead is relevant only to options in the list; it will not return group labels. Group labels are not seen when using typeahead.
Defaulting a selection
- A Dropdown select shouldn't default a selected option. Defaulting a selection only makes sense after a user's selection has been saved and they revisit to update their choice.
- Sometimes choosing "None" as an option is necessary if no options are applicable to the user when a Dropdown multi-select is required. "None" should appear at the top of the list.
Responsiveness
Users on mobile and touch devices should have a larger touchpoint than desktop users. The touch target increases from 36px to 42px for users on mobile or touch devices.
For more information about mobile and touch device breakpoints, see the breakpoints table.
Best practices
Labeling
Required fields
Validation
Alternate considerations
- Use a dropdown multi-select if two or more options can be selected - not necessarily required.
- Use radio buttons when there's fewer than 3 options.
- Use a toggle if the options are a yes or no.
- Use a picker when the user needs to search for a specific item and select it from a list that is pageable.