Usage

A form control used when there are more than 2 options and may require a user to select more than 1 option.

Anatomy

The anatomy of a dropdown multi-select.

1. Select: The form field where the user can select one or more options from a list
2. Selection tag: Once an option is chosen, it becomes a selection. Selections are visually defined by the encapsulation of the text in a gray rectangle
3. Chevron: The chevron icon indicates there are options available in a dropdown list
4. Option list: The grouping of related input options
5. Option: A unique input option
6. Option checkbox: A selectable checkbox beside an option
7. Scrollbar: A bar used to scroll to view more options

See the Design specs for detailed sizing and spacing information

Types

Grouping

• Grouping options with proper group labels can help users scan the list more easily.

Icons

• Use icons to distinguish between options.

States

Select states

Dropdown multi-selects can display the following states: unselected, hover, focus, active, and disabled.

Option states

Within Dropdown multi-select option lists, options can display the following states: selected, hover, and disabled.

Behavior

Sort the option list in a logical order. For instance, alphabetize or put the most selected option(s) at the top.

Open / close

• Normal behavior is to reveal the option list below the select box when there is sufficient space within the viewport to display it entirely. When lower in the viewport, the option list should reveal above the select box.
• Chevron behavior: When the option list is opened, the chevron rotates 180 degrees clockwise. When the option list is closed, the chevron spins back 180 degrees counter clockwise, returning to its original position.
• The option list will close automatically after making a selection or when the user clicks outside of the Dropdown multi-select component.

Scrolling

• If all options can be displayed within the viewport, it is ideal to not have a scroll bar. Scroll bars should appear when option lists exceed the height of the screen, but should not be taller than 300px.
• Note: option lists will appear below or above the select boxes depending on where they sit within the viewport. (See Open / close)

Typeahead

• Present in all dropdown selects, streamlines experience for users.
• Typeahead is relevant only to options in the list; it will not return group labels. Group labels are not seen when using typeahead.

See typeahead

Defaulting a selection

• A Dropdown multi-select shouldn't default a selected option. Defaulting a selection only makes sense after a user's selection has been saved and they revisit to update their choice.
• Sometimes choosing "None" as an option is necessary if no options are applicable to the user when a Dropdown multi-select is required. "None" should appear at the top of the list.

Selection wrapping and truncation

• When options are selected from the option list, they will populate inside the select form field as select tags. Multiple select tags should wrap within the select form field to fit all.

• In extreme circumstances, truncation can be used to prevent the select box from continually expanding.

  • We recommend displaying a maximum of 5 selection tags, and a sixth that summarizes how many other options are selected (e.g., "and 10 more").
  • The truncated selection tag must not have the ability to be deselected (in other words, no X icon).

Removing the selection

• After a user has chosen an option it appears as a selection within the select box. Users can remove a selection by using one of three methods:

  • Selections can be removed by clicking on the X icon within the selection.
  • Backspacing over a selection in the select box removes it.
  • Deselecting the checkbox within the option list will also remove the selection.

Select all

In some situations, a "Select all" option is desirable (e.g., "Select all accounts" when sending an email or "Select all states" when managing preferences). There are some alternate behaviors to consider; choose what is most appropriate for your use case:

1. Select all to choose every option present in the UI:

   • If the Dropdown multi-select has a finite list (e.g., 50 states), the "Select all" option can simply select everything, so that the user sees an individual selection tag for each in the select box.
   • A user can deselect options as normal. The "Select all" option is checked in the "Option list" as long as all other options are selected.
   • For example: a user is presented with a Dropdown multi-select for 50 states. They choose to "Select all" and 50 selection tags are then displayed in the select box.

2. Select all to choose every option present in a data store (e.g., many accounts):

   • If the Dropdown multi-select is backed by an API to yield an unknown and potentially large quantity of options, the "Select all" option may need to be optimized to handle this load. In this situation, "Select all" may need to be preserved as a magic value, to be interpreted by the application in more robust ways.
   • A user cannot deselect individual selections after they have chosen the "Select all" option. They must explicitly deselect "Select all", which will require them to select the individual options they want.
   • For example: a user is presented with a UI to send an email to their clients. They choose "Select all" as recipients. An "All selected" selection tag is displayed in the select box.

Responsiveness

Users on mobile and touch devices should have a larger touchpoint than desktop users. The touch target increases from 36px to 42px for users on mobile or touch devices.

For more information about mobile and touch device breakpoints, see the breakpoints table.

Best practices

Labeling

Required fields

Validation

Alternate considerations

• Use checkboxes for lists smaller than 3 items.
• Use a dropdown select if users can only select 1 option.
• Use a multi-picker when the user needs to search for specific items and select them from a list with more than 7 – 10 items.