MultiSelect
Pick any number of values from a filtered list. Selected items are shown as removable pills inside the input wrapper. Typing narrows the option list. Backspace removes the last selected value.
Basic
Apple
Banana
Cherry
Grape
Kiwi
Mango
Orange
Peach
Pear
Pineapple
Strawberry
Watermelon
<MultiSelect
data={['Apple', 'Banana', 'Cherry', /* … */]}
label="Favourite fruits"
placeholder="Pick some fruits…"
/>Initial values
Pass a value array to pre-select options.
TypeScript
CSS
JavaScript
Rust
Go
Python
SQL
HTML
<MultiSelect
data={skills}
label="Skills"
value={['ts', 'css']}
/>Max values
Use maxValues to cap the number of selections. The search input hides once the limit is reached.
Apple
Banana
Cherry
Grape
Kiwi
Mango
Orange
Peach
Pear
Pineapple
Strawberry
Watermelon
<MultiSelect data={fruits} label="Pick up to 3" maxValues={3} />Description and error
Select all that apply.
TypeScript
JavaScript
Rust
Go
Python
CSS
SQL
HTML
TypeScript
JavaScript
Rust
Go
Python
CSS
SQL
HTML
Please select at least one skill.
<MultiSelect label="Skills" description="Select all that apply." />
<MultiSelect label="Skills" error="Please select at least one skill." />Disabled
Apple
Mango
Banana
Cherry
Grape
Kiwi
Orange
Peach
Pear
Pineapple
Strawberry
Watermelon
<MultiSelect data={fruits} value={['Apple', 'Mango']} disabled />Keyboard behaviour
- Type — filters the option list
- ↑ / ↓ — moves keyboard focus through options
- Enter — adds the focused option
- Backspace (empty input) — removes the last pill
- Escape — closes the dropdown
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | string[] | Option[] | [] | Available option list |
value | string[] | [] | Initially selected values |
placeholder | string | 'Select values…' | Placeholder shown when nothing is selected |
maxValues | number | — | Maximum number of selections allowed |
label | string | — | Field label |
description | string | — | Helper text below the label |
error | string | boolean | — | Error message or highlight flag |
disabled | boolean | false | Prevents interaction |
nothingFound | string | 'Nothing found' | Message when no options match |
name | string | — | Hidden input name prefix — values submitted as name[] |