Multi Select
Multi Select
A searchable Command palette for choosing several values, shown as removable chips in the trigger. For a single value, see Select.
import { MultiSelect, type MultiSelectOption } from "@pompeitech/vesuvius-ui";Default
SalesEngineering
Overflow (+N more)
SalesMarketing+5 more
API
MultiSelect
| Prop | Type | Default | Description |
|---|---|---|---|
options | MultiSelectOption[] | Required. | |
value / defaultValue | string[] | Controlled/uncontrolled selected values. | |
onValueChange | (values: string[]) => void | Called whenever the selection changes. | |
size | "xs" | "sm" | "default" | "lg" | "default" | Fixed trigger height: 28, 32, 36, or 40 px. |
placeholder | string | Shown on the trigger when nothing's selected. | |
maxDisplay | number | Chips shown before the rest collapse into a "+N more" chip. | |
disabled | boolean | false |
MultiSelectOption
| Field | Type | Description |
|---|---|---|
label | string | Required. |
value | string | Required — unique identifier. |
icon | LucideIcon | Optional leading icon shown both in the dropdown list and on each selected chip. |
Accessibility
Since the trigger renders removable chips rather than plain text, always pass aria-label on MultiSelect itself (as in every example above) — the trigger's visible content alone doesn't read as a clear field name to assistive tech. Each chip's remove button is independently focusable and labeled with the option it removes.