| Table of Contents |
|---|
...
Type | Visual |
|---|---|
Regular dropdown Menu |  |
Searchable dropdown menu |  |
Multi Select Dropdown Menu |  |
Multi Select searchable Dropdown Menu |  |
Usage & Behavior
General guidelines
Text
A drop down menu can have a preceding label, or not (see example below).
...
Select trigger: opens the option list and presents the selected value/s.
Option list: displays the list of items available. The list can be textual only or display icons, next to the text, as shown below
(Optional)
the list may have checkboxes for multi selection(Optional) the list may have a search field
(Optional) Action icons for dropdown menus that add extra functionality on items, when hovered. Those icons will display a tooltip describing the action, when hovered.
Text vs. icons and text |  |  Multi select and search box |  | |
Action icons |  |
Order
Choose one of the following styles to order the content:
...
Step | Visual | Description |
|---|---|---|
Click (anywhere in the dropdown area) |  |
|
Search- the user enters a search string |  | |
Selection of item |  |
|
Delete of searched string (manually or by clicking the “x” button) |  |
|
Validations and errors
Please refer to Field validation page for more information.
An example for a drop down menu with a warning:
...
Use when:
The options list is small-medium in size, and space is constrained.
Up to 10-15 items: use regular multi-select dropdown
15-50 item and the user knows what he’s looking for (and aware, to some extent, how it's named in the option list): use searchable multi-select dropdown
Don’t use when:
The list has less than 7 options and the user needs to see them all at once. Use radio buttons or Check box instead.
The user needs to enter a value which is not in the list. Use a combo box instead.
The list has more than 50 (TBD) items, use Dual List Selector or List instead.
General:
Only a list with over 8 items should show a scrollbar.
Keep the text values as short as possible because the list uses single lines only.
The option list should adapt its length to the longest entry by default, but values that are too long may be truncated, having a tooltip displaying their full text (not recommended) - There is no horizontal scrolling in the option list.
Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.
Do not allow the control to auto-adjust based on the selection.
If there’s no label or if the label is not indicative enough, the selected item type should be indicated within the dropdown:
Design
Zeplin Link | Screen Thumbnail |
|---|---|
 |
...