Multi Select
A select that allows multiple selections. Shows removable tags in the trigger; when the selection count reaches a threshold, displays "X selections" instead. Built on Popover, Checkbox, and Tag.
Default
With label and maxTags
When 3+ are selected, the trigger shows "X selections" instead of tags.
Disabled
Usage
Use Multi Select when users can choose several options from a list (e.g. filters, categories, assignees).
Selections appear as removable tags by default. Set maxTags so that once the count reaches that number, the trigger shows "X selections" to keep the trigger compact.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | MultiSelectOption[] | — | Array of { value, label } |
| value | string[] | [] | Controlled selected values |
| onValueChange | (value: string[]) => void | — | Callback when selection changes |
| placeholder | string | "Select..." | Placeholder when empty |
| maxTags | number | 4 | When selected count >= this, show "X selections" instead of tags |
| disabled | boolean | false | Disables the trigger |
| className | string | — | Applied to the trigger button |