Multi select

Tag-backed option picker with local filtering, disabled options, max selection, and removable values.

Multi select composes Field, Tag, and menu rows. It owns local picker interaction; product code owns option sourcing and persistence.

Project tags

Design systemAI native

Tags are removable and options stay source-of-truth controlled by value.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Project tags

Design systemAI native

Tags are removable and options stay source-of-truth controlled by value.

Default

Selected values rendered as removable tags.

Project tags

Design systemAI native

Tags are removable and options stay source-of-truth controlled by value.

Open

Filterable option menu with selected row state.

Project tags

Select options...

Tags are removable and options stay source-of-truth controlled by value.

Empty

Placeholder-only state before selection.

Props

Name	Type	Default	Description
`options *`	`readonly MultiSelectOption[]`	-	Options validated by multiSelectOptionSchema.
`value`	`readonly string[]`	-	Controlled selected option values.
`defaultValue`	`readonly string[]`	`[]`	Uncontrolled initial selected values.
`defaultOpen`	`boolean`	`false`	Initial menu state for demos and screenshots.
`maxSelected`	`number`	-	Optional maximum selected item count.
`placeholder`	`string`	`Select options...`	Placeholder when no values are selected.
`onValueChange`	`(value: readonly string[]) => void`	-	Receives the selected value ids.
`label`	`ReactNode`	-	Field label.