Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

Usage & Behavior

The drop-down consists of:

...

Text labels only

Including a No selection option

With icons

With additional actions and group divider

With group headers

Image RemovedImage Added

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

...

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: 

...