Table of Contents

Usage & Behavior

General guidelines

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.
Dividers or group headers may also be used to organise the options list.

Text labels only
Including a No selection option
With icons
With additional actions and group divider
With group headers	Image Added

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

...

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.

Please refer to the Field Validation page for more information.

A drop-down with a warning:

...