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 GuidelinesFigma Component

Anatomy

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.

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.

Placeholder character count limit: 30
.

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.

Types

States

States

Behavior

Tokens + Typeahead

Specifications

Padding