
Input
Picklist

Default
Selection Summary

Default
Hover
Focus
Disabled
Locked
Error
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. Input Label
Include a clear and concise label that helps the user understand the purpose of the dropdown select. ³

3. Placeholder Text
Use placeholder text to indicate the type of information they will be providing. ²

4. 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. ²

5. Searchable Options
Include a search field if the list of options in extensive, such as a long list of line items names. ²

6. 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.

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