What is a dropdown select?
A dropdown select is a type of input field in which a user fills an input box with an item from a list of acceptable items. Dropdown selects allow only one option to be chosen.
When to use
Use a dropdown select to organize a list of options a user can select from.
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.
Anatomy
Label
Text that defines what type of options are in the list.
Input
The field designated for selecting an individual option from a grouping of related options.
Selection
Chosen option from the options list.
Dropdown chevron
The chevron arrow, within the input suggesting that there are items to select within a dropdown.
Selected option
An option that is visibly selected.
Options list
The grouping of related input options.
Option
A unique input option.
The anatomy of a dropdown select.
Sizing and Spacing
Use the following links to find exact pixel specs for dropdowns select.
Organizing the list
Sort the list in a logical order. For instance, put the most selected option(s) at the top. In many cases we recommend alphabetical order.
Grouping
- Sometimes you'll need to add grouping to a long list of options. Titles can break up options into groups to help users more easily locate them.
Icons
- Icons may be used beside select options; they should assist by making selection easier for users.
- Use icons to distinguish between options.
- Often icons are used when you have two different types of options in a list.
Behavior
Open / close
- Normal behavior is to reveal the list down when placement of the select input is high enough within the viewport. When select input is lower on the screen the list will reveal up.
- Dropdown chevron icon: Rotates 180 degrees clockwise when opened, when closed spins back 180 degrees counter clockwise, returning to the original position.
Scrolling
- If the options can be displayed within the viewport it is ideal to not have a scroll bar. Scroll bars should appear when options lists exceed the height of the screen but should not be taller than 300px.
- Note options lists will appear below or above select inputs 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 names. Grouping headers are not seen when using typeahead.
Defaulting a selection
- A dropdown select shouldn't default a selected option. If you're confident users will likely choose an option you may consider defaulting to a selection.
Input states
Option list states
Responsiveness
Mobile
Users on mobile and touch devices should not see our styling; instead the default styles native to the device should override ours, as these typically provide a better UX as they're designed for use on that particular device.