Description

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

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.

Open

Open

Types

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

Trigger area - selecting the drop-down trigger should open or close the options list. Includes:

• a text area, with the currently-selected option(s) or default text.

• a drop-down arrow.

Options list - displays the list of available values, consisting of:

• Options - must include a text label, but can additionally have an icon. Keep the labels short, because the list uses single lines only.

• In case selecting an option is not mandatory, a No selection item should appear at the top of the options list. This will allow users to avoid selection or deselect a previously selected option.

• Selection indicator - a blue check mark should be shown to the left of the selected option.

• Action icons (optional) - these add extra actions for each list option, and appear on user interaction.

• Status icons (optional) - these add extra information for each list option and always appear.

• Dividers or group headers may also be used to organise the options list.

Default State

The drop-down trigger area consists of a text box showing the default option, if one exists. For example:

If there is no default option:

• 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 Job Title.

Content

• When possible, a drop-down menu should have a preceding label. Labels inform the user about what is included in the options list.

• Order the options list using one of these rules:

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

• The width of the options list should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.

Internal Logic

• Users need to select one option exclusively from a short list (where the user can select multiple options, see Multi-select drop-down below).

• 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 of an option, the options list will close.

• The selected option will be shown in the trigger area.

States

Interaction

Searchable drop-down

A Search field should be added:

• to options lists with over 15 items.

• when users are likely to know what they are looking for.

Internal Logic

• 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 trigger area.

• The search field is cleared each time the options list is closed.

Interaction

Multi-select drop-down

A multi-select drop-down allows users to easily select multiple values from a predefined list.

Internal Logic

Selected items

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

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

• When the selected values exceed the size of the trigger area, the labels will be replaced by the total number of selections, for example “5 selected“.

• An option can be selected by clicking on the checkbox or the label.

• When space is limited and/or the user is expected to select several items, a Select All option can be added.

Select All (optional)

• The All option is a master type checkbox, which controls the state of all the other checkboxes in the list. See Checkbox for the full behaviour.

• The All option should be presented at the top of the options list.

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

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

Multi-select searchable drop-down

Interaction

Validations and errors

Please refer to the Field Validation page for more information.

A drop-down with a warning: 

A drop-down with an error: 

Best practices

• 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 Checkboxes 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.

  • There is no horizontal scrolling in the option list.

  • The options list should adapt its length to the longest entry by default, but values which are too long may be truncated, with a tooltip displaying the full text (not recommended). 

  • 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 preceding label, or if the label is not indicative enough, the {NameOfEntity} should be added within the drop-down, after the number of selections. For example, 2 categories selected:
    
    

Accessibility Compliance

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

Focus management

If a search bar exists, it will be treated as the first item on the options list.

Design

Code