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 only
Text labels with Including a No selection option
Text labels and With icons
Action icons Selection indicatorWith additional actions

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

...

Interaction	Visual	Details
Hover	Image Removed	Click Hovering anywhere on the trigger area Image Removed	Image Added	Switches to hover state.
Clicking or tapping anywhere on the trigger area opens	Image Added	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 Selecting an option		The options list closes. The selected option is displayed in the field. Select the
Viewing options list with an existing selection	Image Added	Shows the selected option with a blue check mark on the left side of the option.
Selecting a No selection option		The option list closes. Select is displayed in the field.
Click Clicking anywhere outside of the drop-down		Closes the options list.
View options list with an existing selection	Image Removed	Shows the selected option with a blue check mark on the left side of the option.
Image Removed

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:

...