Component

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.
form
DOM renderImage render
Multi selectDefault
Tags keep generated UI, product surface, and research coverage explicit.

Playground

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

Loading playground

Rendered matrix

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

Default

Dense tag fields inside a product settings flow.
Tags keep generated UI, product surface, and research coverage explicit.
Render state

Open

Filterable option menu with selected row state.
Open menu shows active rows, disabled options, metadata, and filtering chrome.
Render state

Limit

Selection limit with the maximum reached.
Two active tags max. Additional options remain visible but selection is capped.
Render state

Empty

Placeholder-only state before selection.
Placeholder state before the first scoped tag is selected.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
options *readonly MultiSelectOption[]-Options validated by multiSelectOptionSchema.
valuereadonly string[]-Controlled selected option values.
defaultValuereadonly string[][]Uncontrolled initial selected values.
defaultOpenbooleanfalseInitial menu state for demos and screenshots.
maxSelectednumber-Optional maximum selected item count.
placeholderstringSelect options...Placeholder when no values are selected.
onValueChange(value: readonly string[]) => void-Receives the selected value ids.
labelReactNode-Field label.