Multi Select

Multi selects allow our users to choose one to many options from a list, presented in a dropdown. We typically see these selects on forms.

Other select components are group select, select, and tiered select.

Demo and Developer Guidelines


While there are some elements you can add to a multi select, all multi selects include search, tokens, dropdown, active and inactive options, a clear icon, and a collapse / expand caret icon.


Labels are title case without punctuation and contain a single noun or noun phrase (labels do not contain verbs). See the Field Label Glossary for common labels and their use cases.

Multi Select Field

Multi select placeholder text is sentence case without punctuation.

Placeholder text is “Select” followed by the plural name describing the items in the dropdown.

Menu & Menu Items

Menu items are sentence case without punctuation unless it is a proper noun or a user-inputted option. See Menu for more details.

Collapse / Expand Icon

This is aligned to the right of the input containing the placehholder text.

Focused Item

When the dropdown is first displayed, the first option is highlighted. As the user scrolls or uses the up or down arrow keys, the focused option is highlighted.

Selected Item

When an option is selected, the font of that option is blue and bolded, and that option appears as a token in the select field.





Tokens + Typeahead