Multi Select

Ready

Select many options as removable tags.

Requires cmdk

Installation

$ npx @oratiq-js/ui add multi-select

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { MultiSelect } from "@/components/ui/multi-select";

The list stays open while picking — multi-select means several choices, closing per pick would be hostile.
Selections render as dismissible chips in the trigger; overflow collapses to a +N chip.
Search filters the list via Command; keyboard navigation follows the writing direction.

Prop	Type	Default	Description
`options`*	`{ value, label, disabled? }[]`	—	The selectable options.
`value / defaultValue`	`string[]`	—	Selected values (controlled / uncontrolled).
`onValueChange`	`(values: string[]) => void`	—	Fires with the full selection.
`maxShown`	`number`	`3`	Chips shown before collapsing to +N.

When to use

Two to five exclusive choices → Radio Group. One choice from many → Combobox. Several choices from many → this.

View source on GitHub → components/ui/multi-select.tsx