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.

Text labels
Text labels with No selection option	Image Added
Text labels and icons
Action icons Selection indicator

...

Interaction	Visual	Details
Hover
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes 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 option		On selecting an option: the options list closes. the selected option is displayed in the field.
Click anywhere outside of the drop-down		Closes the options list.
View options list with an existing selection		Shows the selected option with a blue check mark on the left side of the option.
	Image Added

A Search field should be added:

...

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:

...