Components

Lookup Multi-Select

Design
Code

Let users choose multiple items from the same lookup.

Multi-select should only be used when all items can be affected by the same action. To only allow for a single selection from the larger list, try lookup instead.

Size

Consider interface density and the select’s position when choosing between the three available sizes. (Sizing itself is controlled by the form modifier component.)

uiexpandregionvertical

Small: Ideal for dense interfaces.

Dismiss

Selected items can be dismissed in one of three ways.

Al Attles

uidismiss

Red Auerbach

uidismiss

Elgin Baylor

uidismiss
uiexpandregionvertical

Backspace: You can hit backspace to remove the last item listed.

Usage

List Length

Like the lookup select, a lookup multi-select works well when your list is 15+ items long.

selects-lookupmultilength-dont

Don'tlist three items they could easily select with a checkbox.

selects-lookupmultilength-do

Dojustify the typeahead with a larger list to filter.

For shorter lists, read the checkbox guidelines.

Options

Option content should be familiar to the user–they should have an idea of what’s in the list before opening the select. That familiarity helps them decide what to type.

selects-lookupmultiorder-dont

Don'tframe every item differently in an unhelpful order.

selects-lookupmultiorder-do

Doprovide a logical list of related items.

Option Groups

Use option groups to divide larger lists into logical sections, like putting the most popular items at the top. You can also add labels for increased clarity.

uiexpandregionvertical

    Offense

    Defense

List Height

Allow enough space in your interface or adjust the max-height to prevent the option list from expanding beyond the screen.

By default, 6.5 items will show when the option list is expanded. If you use option groups, adjust the max-height to ensure it falls on a ½ item to signal the user can scroll.

selects-lookupmultioverflow-dont

Don'tallow overflow to land between options making it look like all options are visible.

selects-lookupmultioverflow-do

Dosize the maximum height to split an option to make scrolling obvious.

Max-Height

Should the selected items exceed one line, the default max is set to 2.5rem. If you need something larger, we suggest the half-line to indicate more items are listed and the user can scroll.

Microcopy

Placeholder

The multi-select placeholder should read “Select items,” making it clear that the user can and should choose more than one.

selects-lookupmultiplaceholder-dont

Don'tput a single object in the placeholder.

selects-lookupmultiplaceholder-do

Doprovide direction with “select” as the action.

Options

Treat all options as non-label text and only capitalize the first word, both in the list and as pills.

selects-lookupmulticapitalize-dont

Don'tcapitalize every word in an option (unless it’s a proper name).

selects-lookupmulticapitalize-do

Dokeep consistent capitalization from option list to pill.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
Android