...

It allows users to select one or multiple values from a list of predefined values. An optional search field can help the user to find values easily.
Example:

Types

Type	Usage	Image
Regular drop-down	When the user can only select one option from a predefined list. When there are fewer than 15 options.
Searchable drop-down	Image Removed	Multi-select drop-down	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.	Image Added
Multi-select drop-down	When the user can select multiple values from a predefined list
Multi-select searchable drop-down

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

• Select triggerTrigger area. Selecting the closed drop-down field trigger should open or close the options list. Includes:

  • text area, with currently-selected option or default text.

  • a drop-down arrow.

• 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. These can add extra functionality for each option when hovered. These icons They should display a tooltip describing the action on hover.

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

Text labels
Icons and text labels
Action icons Selection indicator

...

• Where a preceding label is being used, the default text will be "Select".

...

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

...

Content

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

...

• Users need to select one option exclusively from a short list.

• There should be a minimum of 3 options.

• The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.

• On selection, the options list will close.

• The selected item will be presented in the select trigger area.

States

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

...

Description	Visual
Regular state		The Select field always displays either the current selection, the hint text “Select”Select, or the hint text “Select Select a {NameOfEntity}”. See the Default State section above.
Hover
Click a closed drop-down		Clicking or tapping anywhere on the drop-down field should open the options list. Hovered options should be highlighted with a light blue background color. The user may use the Up and Down keys to navigate between options and Enter to select.
Select an item		On selecting an option: the options list closes. the selected option is displayed in the field.
Click a drop-down with an existing selection		Opens the option list. Shows the selected item with a blue check mark on the left side of the option.

...

• The search field will be auto-focused when the options list opens, so that the user may start searching immediately.

• The search field will operate as a Live Search.

• The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.

• On selection, the options list will close.

• The selected item will be presented in the select trigger area.

Interaction

Description	Visual
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 filter can match anywhere within the value string (at the beginning, middle, or end). The user may use the Up and Down keys to navigate between options and Enter to select.
Select an item		On selecting an option: the options list closes. the selected option is displayed in the field.
Click a drop-down with an existing selection		Opens the option list. The search field is focused and the user may start typing. Shows the selected item with a blue check mark on the left side of the option.

...

• 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 selected items exceed the size of the trigger area, the labels will be replaced by the total number of selections.

• When space is a constraint and/or the user is expected to select many items, a Select All option can be added:

   

Select All (optional)

...

• “All” All is a master type checkbox, which controls the state of all the other checkboxes in the list. See Check Box for the full behaviour).

• “All” All should be presented at the top of the options list.

• When all items are selected, the select trigger area should show “All” All instead of a number.

Use the “All” 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).

...

Step	Visual	Description
Click a closed drop-down		Clicking or tapping anywhere on the drop-down field opens the options list.
Select an item		The options list remains open. The option name is added to the select trigger area. The selected item is checked.
Multiple items selected		First, all items are presented one after another, separated by a comma. When the selected items exceed the size of the trigger area, the total number of selections should be presented.
Click on the select trigger area, or Click anywhere outside of the control		The options list box closes. The selected options are displayed in the fieldtrigger area.

Multi-select Searchable drop-down

...

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 matching results only. The filter can match anywhere within the value string (at the beginning, middle, or end). The user may use the Up and Down keys to navigate between options and 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” 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:

    

     

Accessibility Compliance

For searchable drop-down In Focus state:

• Typing will initiate the search

• Clicking the down arrow key will open the menu

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

...