INPUTS / COMPONENTS
Multi-select
Find and choose several options.
About multi-select
Multi Select is a dynamic select component with autocomplete. This component can be used for simple or complex sorting.
Anatomy
Shared parts, named consistently.
- 1Multi Select DropdownDropdownRequired
A dropdown to open the list.
- 2Multi Select DropdownLabelRequired
The label of the dropdown.
- 3Multi Select DropdownAsterix
A star to show when required.
- 4Multi Select DropdownSelected options textRequired
A text string to show the number of options selected.
- 5Multi Select DropdownIconRequired
An icon to show if opened or closed.
- 6Multi Select DropdownHelper message
A string below the input to provide additional context about the Dropdown. When in an error state, the helper message will turn red.
- 1Multi Select ListboxDropdown ListboxRequired
The container of the modal.
- 2Multi Select ListboxText FieldRequired
An input to search for items.
- 3Multi Select ListboxFilter PillRequired
A selectable pill to show what items are checked.
- 4Multi Select ListboxMore options countRequired
A count to show how many options are hidden.
- 5Multi Select ListboxButtonRequired
Icon to indicate if the modal is opened or closed.
- 6Multi Select ListboxHeaderRequired
The header of the modal
Try the default
A working example with the shared V1 visual language.
When to use
Use for longer lists with multiple choices. Show selection counts, support searching, and keep removal reversible.
Enter opens. Tab reaches search, native checkboxes, Clear, and Done. Space toggles a choice; Escape closes.