...

Usage & Behavior

General guidelines

Structure

The drop-down consists 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 hover. A tooltip describing the action should be displayed on hover.

...

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

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.

...

Interaction	Visual	Details
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes 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 part of the option label which matches the search string should be shown in bold. The user may use the Up and Down keys to navigate between options and Enter to select.
Select an option		The option label is added to the trigger area. The options list remains open, so the user can select another item. The selected options are checked.
Delete search string		A search string can be cleared using the X button, or manually by using the delete key. The full options list is presented. The search field is in focus.

Validations and errors

Please refer to the Field Validation page for more information.

A drop-down with a warning: 

...