Description

...

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

• Select trigger. Selecting the closed drop-down field should open the options list.

• Options list. Displays the list of available values. Each option:

  • must have a short text label

  • can also have an associated icon

• (Optional) Action icons can add extra functionality for each option when hovered. These icons should display a tooltip describing the action on hover.(Optional) A preceding label can inform the user about the options included in the drop-down.

• Selection indicator. Where an option has already been selected, it should be shown in the options list with a blue check mark on the left side.

Text labels
Icons and text labels
Action icons Selection indicator
Preceding label	Image Removed

Default State

The drop-down consists of a text box showing a default value, if one exists. For example:

...

• Where there is no label, the default text will be "Select a {NameOfEntity}". For example, "Select a queue".

...

Content

The options should be ordered A drop-down menu can (optionally) have a preceding label. Labels inform the user about what is included in the drop-down.

...

Order the options using one of these patternsrules:

• Logical. Sort options into a meaningful order. For example, group related options together, and order by the most common to least common.

• Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.

• Numeric. Sort numeric values in a sequential order, with the lowest number first.

• Chronological. Sort time-related information into chronological order, with the most recent first.

...

Step	Visual	Description
Click a closed drop-down		Clicking or tapping anywhere on the drop-down field opens the options list. The search field is focused and the user may start typing.
Enter Search		As characters are entered, the list is filtered to show relevant results only. The user may use the ‘Up' and 'Down’ arrows to navigate between items, and click ‘Enter’ to select.
Select an item		The option name is added to the select trigger area. The options list remains open, so the user can select another item. Search can be cleared to view the full options list. The selected items are checked.
Delete search string		A search string can be cleared using the “x” button, or manually by using the delete key. 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: 

...

• Use when:

  • The options list is small-medium in size.

  • Space is constrained.

• Use the searchable type when:

  • there are more than 15 options.

  • when users are expected to know what they are looking for, and are likely to be aware of how the option is labelled.

• Don’t use when:

  • The list has fewer than 3 options.

  • The list has fewer than 7 options and the user needs to see them all at once. Use radio buttons or Check boxes 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 show a scrollbar when the list has over 8 items.

  • 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, with a tooltip displaying the full text (not recommended). The option list may not have a horizontal scroll.

  • 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 added within the drop-down, after the number of selections:

    Image RemovedImage Added

     

Design

Zeplin Link	Screen Thumbnail
https://zpl.io/bWOjejb

...