Heading: Optional. Used as a label for the entire picklist if the picklist control does not include a label. (ex. Add new filter button, filter pill)
Search: Optional. Used to search within the picklist if there are many option to choose from.
List: Required. Use to show the list of available choices.
Footer: Optional. Use to display "Apply" button for filter bar selections.
Default
Multi Select
Parent Child
Parent Child Single Select
Default
Loading
No Results
Error
Max Height
The list container has a max-height of 308px. Once it reaches this height, the overflow can be seen by scrolling.
Min Width and Truncation
Min Width: The min-width of the picklist is 224px. The width may be increase to suit the needs of the design.
End Truncation: By default, text will be truncated to 2 lines.
Middle Truncation: Items may also be set to truncated in the middle if there are important identifiers at the end of the item text.
1. Usage
The picklist list should be used for navigation, selections or actions. It should not be used to display static information. Consider using a tooltip instead.
2. Hidden
The picklist should be hidden until opened with a control element. It should not be left open on a page as a visible element. If vertical, visible navigation is needed, consider using stacked tabs.
3. Elevation
The picklist should be elevated above the page content. The picklist should be positioned to always be visible and should not be cut off by page.
4. Unavailable Choices
Disable any unavailable choices. When user clicks a disabled choice, display a flash message explaining why the item is disabled and how to make it active. Do not remove unavailable items. This decreases spacial consistency and makes the interface harder to learn. Use this pattern with caution and try to avoid UX that creates scenarios with unavailable choices.
5. Permissions
If the user doesn't have permission to access a certain feature then it should be removed from the picklist.
6. Scrolling
Avoid long scrolling lists when possible. When a list is scrollable, not all of the choices are visible and it can be challenging for users to scroll while keeping the mouse within the picklist. If this is unavoidable, include a search input to help users navigate list.
Keep picklist options short and simple. Unless it is an icon button, the button that triggers the picklist should include a label that clearly indicates what they will find in the menu. The button label should be a verb or verb phrase. See Buttons.
 |  |
|---|---|
Create campaign Upload creative | Campaigns Upload a new creative |
Picklist menu items should be short and written using parallel construction--every item should be a noun or a verb. Avoid repeating words if possible. The number of choices should be limited to 5-8 items. Additional options may be placed in a nested menu. Nested menus should be uses sparingly.
Use sentence case--only capitalize the first word.
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
Additional Reading
Dropdowns: Design Guidelines https://www.nngroup.com/articles/drop-down-menus/
Similarity Principle in Visual Design https://www.nngroup.com/articles/gestalt-similarity/
Law of Similarity https://lawsofux.com/law-of-similarity/
UI cheat sheet: dropdown field https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
UX Design: Drop-Downs in Forms https://uxplanet.org/ux-design-drop-downs-in-forms-c6943ec30037
7 Rules of Using Radio Buttons vs Drop-Down Menus https://uxdworld.com/2018/05/06/7-rules-of-using-radio-buttons-vs-drop-down-menus/