Description

ONGOING

A drop down menu consists of related content grouped together and organized vertically.

It allows users to search and select a single value from a list of predefined values.

Example:

Types

Type	Usage
Textual dropdown Menu
Multi Select 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.

Internal Logic

Users need to select one item exclusively from a short list of options (minimum 3 items).

Search

A search field should be added to options list with more than 15 items, and when users are expected to know what they are looking for.

The search field will be auto-focused when clicking the select trigger area, so that the user may start searching immediately
The search field will operate as Live Search
The user may select an item either by using the mouse or by using the ‘up’ and ‘down’ keys to navigate between items and ‘Enter’ to select
Selected item will be presented in the select trigger area and the option list will close

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.

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

State	Visual	Visual- searchable
Regular
Hover
Active
Selected
Disabled
Error
Warning
Focused
Focused Hover
Focused Active
Focused Disabled

Interaction

Regular

Description	Visual
Regular state		The Select field always displays the current selection or hint text “select”
Hover
Click (anywhere in the dropdown area)		The user clicks or taps the field to display a list of options to choose from. Hovered items are highlighted with a light blue background color
Select an item		Once the user selects an option, the list box closes and the selected option is displayed in the field.
Clicking a dropdown with an existing selection		Opens the option list Selected items have a blue V sign on the left side of the value

Searchable Dropdown

Description	Visual
Regular state		The Select field always displays the current selection or hint text “select”
Hover
Click (anywhere in the dropdown area)		The list of options is displayed The search field is in focus and the user may start typing Hovered items are highlighted with a light blue background color.
Search- the user enters a search string		The list is filtered to show relevant results only The first item is marked for quick selection (the user may use the ‘Up' and 'Down’ arrows to navigate between items, or click ‘Enter’ to select)
Selection of item		Once the user selects an option, the list box closes and the selected option is displayed in the field
Clicking a dropdown with an existing selection		Opens the option list Selected items have a blue V sign on the left side of the value. The search field is in focus

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
https://zpl.io/bWOjejb

Drop Down Menu