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.
Other select components are group select, select, and tiered select.
Demo and Developer GuidelinesAnatomy
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.
Label
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.
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.
Types
States
States
Please see In-Line Error Validation on Submit.
Behavior
Tokens + Typeahead
Specifications
Padding
