Multi Select

Pick several options. Free, MIT · Forms and input › Selects

Multi-value select: chips in the field, checkboxes in the list. className and style go to the field wrapper; ref and other props to the combobox trigger button. Chip remove buttons follow the trigger in Tab order; Backspace on the trigger removes the last value. While the list is open, Tab moves into its "Clear all" button.

Installation

npx valyro-cli@latest add multi-select

npx shadcn@latest add https://valyro.xyz/r/multi-select.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { MultiSelect } from 'valyro-ui';

Props

Prop	Type	Default
`options`	`SelectItem[]`		Options to pick from, flat or in labelled groups. Or compose them as children: `MultiSelect.Item`, `.Group`, `.Empty`.
`children`	`ReactNode`		The compound form instead of `options`: `MultiSelect.Item`, `MultiSelect.Group` and `MultiSelect.Empty` elements.
`value`	`string[]`		Selected values in the order they were picked.
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`		Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placeholder`	`string`	`'Select…'`	Field text while nothing is selected.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`invalid`	`boolean`	`false`	Error border and aria-invalid on the trigger (an explicit `aria-invalid` wins).
`searchable`	`boolean`	`false`	Adds a filter box at the top of the popover.
`searchPlaceholder`	`string`	`'Search…'`	Placeholder and accessible name of the filter box.
`maxChips`	`number \| 'auto'`	`2`	Chips shown in the field before collapsing the rest into "+N". `'auto'`: as many whole chips as the field's width holds (measured again when it resizes), so chips are never squeezed into a few letters.
`emptyText`	`ReactNode`		Shown in the popover when no option matches the filter or `options` is empty. Or `MultiSelect.Empty`.
`labels`	`Partial<MultiSelectLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`name`	`string`		Submits every selected value with the surrounding form (one hidden input per value).

Compound parts

MultiSelect.Item (MultiSelectItem), MultiSelect.Group (MultiSelectGroup), MultiSelect.Empty (MultiSelectEmpty)

Related components

Select — Pick one option from a list
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement

Previous: Select · Next: Combobox · All Forms and input