Multi Select
ProA selection control that allows choosing multiple options, displayed as removable tag chips within the input area. Combines a filterable dropdown with a tag-based display of selected items. Supports keyboard-driven selection and removal.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Multi-select input showing selected items as tags with a filterable dropdown. | Use for assigning multiple values — tags, categories, team members, permissions. |
| With Search |
Usage Guidelines
Do
Display selected items as removable tag chips inside the input area.
Don't
Use when only a single selection is allowed — use Select or Combobox.
Do
Show a count badge when many items are selected (e.g., "+3 more").
Don't
Remove tags without a visible remove button — each chip needs an (X) control.
Do
Announce selection count changes to screen readers.
Don't
Hide the dropdown when all options are selected — show a "No more options" message.
Code
Design Tokens
Accessibility
- Uses role="combobox" container with aria-expanded and aria-controls.
- Each selected tag chip has a remove button with aria-label="Remove {value}".
- Announce selection count changes via aria-live="polite" (e.g., "3 items selected").
- Dropdown list uses role="listbox" with aria-multiselectable="true".
- Selected options use aria-selected="true" in the listbox.