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 hoveruser interaction.
Status icons (optional) - these add extra information for each list option and always appear.
Dividers or group headers may also be used to organise the options list.

...

Interaction	Visual	Details
Hovering anywhere on the trigger area		Switches to hover state.
Clicking 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.
Selecting an option		The options list closes. The selected option is displayed in the field.
Viewing options list with an existing selection		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.
Clicking anywhere outside the drop-down		Closes the options list.
Focusing or hovering on a list option when its row contains action and status icons	Image Added	Actions are revealed. Aria label will announce the action and status icons on the left and on the right (for screen reader purposes).
Focusing or hovering over an action or status icon	Image Added	Shows a tooltip describing the action or status.

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:

...

Keyboard	Trigger area	Options list

Tab	Navigates to the next component.	Regular (single-select) - N/A Multi-select - N/A In case of a search bar - moves focus from search bar to the first list item.
Shift + Tab	Navigates to the previous component.	Regular (single-select) - N/A Multi-select - N/A In case of a search bar - moves focus from list item to the search bar.
Space	Opens the menu.	Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
Enter	Opens the menu.	Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
Esc	N/A	Closes the menu without updating the selection.
Arrows	Up/Down - Opens the menu.	Up - Navigates to the previous actionitem. Stops at the first item in the list. Down - Navigates to the next actionitem. Stops at the last item in the list. Left and right - In case there are status icons/actions in the option row - will navigate to the icon/action (movement will not be circular). In case of a search bar - The right and left arrows act as arrows within a Text Field. Holding down the key will scroll continuously.
Page Up/Home	N/A	Navigates to the first item.
Page Down/End	N/A	Navigates to the last item.

...