Input
Picklist
Default
Selection Summary
Default
Hover
Focus
Disabled
Locked
Error and Warning
Error: Helps users identify and fix critical issues.
Warning: Alerts users to potential issues that don't block the workflow
Tooltip: Use when space is limited and text cannot be displayed below the input
Tooltip Focus: Displayed error or warning message
1. When to use
Use a dropdown select when there are more than 5 options. When there are less than 5 options, consider using checkboxes or radios for quicker scan-ability. ¹
2. Multi select count
Display the a count of the selected items if there are many choices. If there are only a few choices, display selection values in the form input. ²
3. Searchable Options
Include a search field if the list of options in extensive, such as a long list of line items names. ²
4. Selection Summary
For multi select choices, a selection summary may be used to display the selected choices below the dropdown select. This allows the user to quickly see or remove previous selections. Don't use a selection summary for single select choices.
Keep the dropdown select label short. It should clearly indicate what the user will find in the menu.³
 |  |
|---|---|
Verticals Account Team | Select Verticals Choose Account Team Members |
Include placeholder text that indicates the type of options in the menu.² Placeholder text should not function as the label. Use verb phrases for placeholder text.
| |
|---|---|
Select Verticals Select Account Team | List of Verticals Account Team Members |
Dropdown menu items should be short and written using parallel construction. In most cases, it should be a list of nouns. Avoid repeating words if possible.
Options should be ordered in a logical manner, such as by frequency-of-use, or alphabetically as a fallback. Group similar options together to make them easier to scan.
Related Components
Related Patterns
Additional Reading
How to design a form dropdown menu https://formsort.com/article/how-to-design-a-dropdown-field-in-a-form/
Dropdown UI design guide https://www.setproduct.com/blog/dropdown-ui-design
UX Design: Drop-Downs in Forms https://uxplanet.org/ux-design-drop-downs-in-forms-c6943ec30037