Description

ONGOING 

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

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

Example:

Types

Type	Visual
Regular dropdown Menu
Searchable dropdown
Multi Select Dropdown
Multi Select searchable Dropdown

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.

Structure

The drop-down consists of:

1. Select trigger: opens the option list and presents the selected value/s.

2. Option list: displays the list of items available. The list can be textual only or display icons, next to the text, as shown below

3. (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
Action icons

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

Internal Logic

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

States

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

Interaction

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

Additional Types

Searchable Dropdown

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.

Internal Logic

• 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

Interaction

Description	Visual
Click (anywhere in the dropdown area)		The list of options is displayed The search field is in focus and the user may start typing
Search- the user enters a search string		The list is filtered to show relevant results only 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 The search field is in focus

Multi Select Dropdown

A multi selection dropdown allows users to easily search and select multiple values from a menu list.

Internal Logic

Selected items

• The selected items are presented in the select trigger area as read-only.

• 2 or more items are presented one after the other, separated by a comma.

• When the selection of items exceeds the size of the container, the names will be replaced by the total number of selections

• When space is a constraint and/or the user is expected to select many items, :

   

Select All (optional)

• “All” may be presented at the top of the list, operates as a master type checkbox (see full behaviour on Check Box).

• When all items are selected the select trigger area shows “All”.

Use the “All” option when:

• The user is expected to select all or most of the items

• The list is very long (so it will allow the user to easily clear all selections)

Interaction

Step	Visual	Description
Click (anywhere in the dropdown area)
Selection of item		The item name is added to the select trigger area The selected item is checked and the option list remains open
More than 1 item is selected - Regular vs. exceeds the container space		First, all items are presented, separated by a comma When the amount of items exceeds the container space - the number of selected items is presented
Click on the select trigger area or outside the control		The list box closes and the selected options are displayed in the field

Multi Select Searchable Dropdown

Interaction

Step	Visual	Description
Click (anywhere in the dropdown area)		The list of options is displayed and the search field is in focus
Search- the user enters a search string
Selection of item		The item name is being added to the select trigger area The user may select another item or clear the search to view the full list
Delete of searched string (manually or by clicking the “x” button)		The full list is presented 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

• Use when:

  • The options list is small-medium in size and space is constrained.

  • Use the searchable type when there are more than 15 item and the user knows what he’s looking for (and aware, to some extent, how it's named in the option list)

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

New LUX design