Description

...

colour	Yellow
title	Ongoing

 A drop-down menu consists of related content grouped together and organized vertically.

...

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

Trigger area

...

- selecting the drop-down trigger should open or close the options list. Includes:

• a text area, with the currently-selected option(s) or default text.

• a drop-down arrow.

Options list

...

- displays the list of available values, consisting of:

• Options

  . Must

  - must include a text label, but can additionally have an icon. Keep the labels short, because the list uses single lines only.

• Selection indicator

  . A

  - a blue check mark should be shown to the left of the selected option.

• Icon buttons

  Action icons (optional)

  . These

  - these add extra actions for each list option, and appear on hover. A tooltip describing the action should be displayed on

  hover.

• Preceding label (optional). A label to the left of the trigger area, to inform the user about what is included in the options list.

...

• hover.

Text labels
Text labels plus icons
Action icons Selection indicator

...

• Where there is no label, the default text will be Select a {NameOfEntity}. For example, Select a queueJob Title.

...

Content

A drop-down menu can (optionally) have a preceding label. Labels inform the user about what is included in the options list.

...

• Users need to select one option exclusively from a short list . (Where 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

The Select field always displays either:

the current selection, or

Interaction	Visual	Details	None	Image Removed
the hint text Select, or the hint text Select a {NameOfEntity}. See the Default State section above. 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.

...

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 so that the user may start typing.
Enter search		As characters are entered, the list is filtered to show matching results only. The Unless otherwise specified, 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	Guy Hivroni (Unlicensed) please fix spelling	On selecting an option: the options list closes. the selected option is displayed in the field. the search field is cleared.
View options list with an existing selection		Shows the selected item with a blue check mark on the left side of the option.

...

• The selected values are presented in the trigger area as read-only.

• 2 or more items are presented one after the other, separated by a comma and a space.

• When the selected values exceed the size of the trigger area, the labels will be replaced by the total number of selections, for example “5 selected“.

• An option can be selected by clicking on the checkbox or the label.

• When space is limited and/or the user is expected to select several items, a Select All option can 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.

Validations and errors

Please refer to the Field validation page for more information.

A drop-down with a warning: 

...