Description
ONGOING
A drop down menu consists of related content grouped together and organized vertically.
It allows users to select a single value from a list of predefined values.
Example:
Types
Type | Usage |
|---|---|
Textual dropdown Menu |  |
 | |
  |
Usage & Behavior
General guidelines
Text
A drop down menu can have a preceding label, or not (see example below).
When exists, the label informs the users what to expect in the options list.
The label should be clear and short (limited to a single line).
Internal Logic
Users need to select one item exclusively from a short list of options (minimum 3 items, maximum - y).
Structure
The drop-down consists of:
Select trigger - opens the option list.
Option List - displays the list of items available. The menu can be textual only or display icons, next to the text, as shown below:
(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.
For example:
Order
Choose one of the following styles to order the content:
Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options.
Alphabetical: Sort the options alphabetically if more than 8 select options are available. This helps the user find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric:Sort numeric values into a sequential order, with the lowest number first.
Chronological:Sort time-related information into chronological order, with the most recent first.
Default Values
The drop down consists of a text box showing a default value, if exists. For example:
If not:
If a label exists, the default text will be "Select".
If there is no label, the default text will be "Select a {NameOfEntity}". For example, "Select a queue".
States
Interaction
The Select field always displays the current selection.
The user clicks or taps the field to display a list of options to choose from.
Once the user selects an option, the list box closes and the selected option is displayed in the field.
Hovered items are highlighted with a light blue background color.
Selected items have a blue V sign on the left side of the value as shown below
Unlike 'Combo Box', the user cannot enter text in the text box (excluding 'Searchable dropdown menu')
Validations and errors
Please refer to Field validation page for more information.
An example for a drop down menu with a warning: 
An example for a drop down menu with an error: 
Best practices
The drop down should be used when the list of available values is long and space is constrained.
Only a list with over 15 items should show a scrollbar.
When there are less than 7 options and the user needs to see them all at once → use radio buttons.
When the user needs to enter a value which is not in the list → use a combo box.
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.
Design
Zeplin Link | Screen Thumbnail |
|---|---|
 |
Current appearances in our products
Forecasts:
Quality Monitoring Advanced Search:
