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

Selected items can be dismissed in one of three ways.

Use a table view to display the results when selecting an option. If using our React Native component, this is done for you.

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

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

Dojustify the typeahead with a larger list to filter.

For shorter lists, read the checkbox guidelines.

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.

Don'tframe every item differently in an unhelpful order.

Doprovide a logical list of related items.

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.

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

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

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.

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

Don'tput a single object in the placeholder.

Doprovide direction with “select” as the action.

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

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

Dokeep consistent capitalization from option list to pill.