...

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

...

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: 

...

• Use when:

  • The options list is small-medium in size.

  • Space is constrained.

• Use the searchable type when:

  • there are more than 15 options.

  • when users are expected to know what they are looking for, and are likely to be aware of how the option is labelled.

• Don’t use when:

  • The list has fewer than 3 options.

  • The list has fewer than 7 options and the user needs to see them all at once → use /wiki/spaces/UX/pages/299860272 or Checkboxes instead.

  • The user needs to enter a value which is not in the list → use a /wiki/spaces/UX/pages/299860272 instead.

  • The list is large → use Dual List Selector or List instead.

• General:

  • Only show a scrollbar when the list has over 8 items.

  • Keep the text values as short as possible, because the list uses single lines only.

  • There is no horizontal scrolling in the option list.

  • The options list should adapt its length to the longest entry by default, but values which are too long may be truncated, with a tooltip displaying the full text (not recommended). 

  • Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.

  • Do not allow the control to auto-adjust based on the selection.

  • If there’s no preceding label, or if the label is not indicative enough, the {NameOfEntity} should be added within the drop-down, after the number of selections. For example, 2 categories selected:
    

    Image Modified

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...