Description

...

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

...

• 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.

• 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.

Select All (optional)

...

Image Added

Image Added

Image Added

• The All option is a master type checkbox, which controls the state of all the other checkboxes in the list. See Check Box for the full behaviour.

• The All option should be presented at the top of the options list.

• When all items are selected, the trigger area should show All instead of a number.

...

Interaction	Visual	Details
Click the trigger area	Image RemovedImage Added	Clicking or tapping anywhere on the trigger area opens or closes the options list.
Select an option	Image RemovedImage Added	The options list remains open. The option label is added to the trigger area. The selected item is checked.
Multiple items selected	Image RemovedImage AddedImage Added	First, all items are presented one after another, separated by a comma and a space. When the selected items exceed the size of the trigger area, the total number of selections should be presented.
Click on the trigger area, or Click anywhere outside of the control	Image RemovedImage Added	The options list closes. The selected options are displayed in the trigger area.

...

Interaction	Visual	Details
Click the trigger area	Image RemovedImage Added	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	Image RemovedImage Added	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	Image RemovedImage Added	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	Image RemovedImage Added	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: 

...