Multi Select
A Combobox that keeps several values as removable chips inside the field. Backspace removes the last chip; cap the count with max or add a select all row.
import { MultiSelect } from "pleate/multi-select";Travellers, select all, max
Marta RossiJoao Pires
Ines Duarte
Sizes and states
LisbonKyoto
LisbonKyotoHanoiOaxaca
Naples
Props
- options
The choices.
{ value, label, description?, icon?, disabled?, group? }[]- value / defaultValue / onValueChange
Chosen values; controlled or uncontrolled.
string[]- max
Most values allowed; the other options are disabled and the panel shows a count.
number- selectAll
Label of a first row that selects or clears every option (hidden while searching or with max).
string- filter / onInputChange / loading / emptyText / clearable
Same as Combobox.
as Combobox- variant / size / invalid / disabled / name
name adds one hidden input per value.
as Combobox
Accessibility
- Same combobox pattern as Combobox with an aria-multiselectable listbox; chosen options report aria-selected.
- Each chip has a remove button named "Remove <label>"; Backspace on an empty input removes the last chip.