Table of Contents

Usage & Behavior

General guidelines

The drop-down consists of:

...

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
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 The options list closes. The selected option is displayed in the field.
Select the No selection option	Image Added	The option list closes. the selected option Select 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.

...

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.