ComponentClient component

Multi Select

A searchable multiple-value picker with selection limits and compact summaries.

Installation

Preview

Project teams

Search and select up to four teams.

Usage

tsx

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

<MultiSelect
  defaultValue={["design"]}
  options={[
    { value: "design", label: "Design" },
    { value: "engineering", label: "Engineering" },
    { value: "product", label: "Product" },
  ]}
  placeholder="Select teams"
/>

API reference

Prop	Type	Default	Description
`options`	`MultiSelectOption[]`	`—`	Searchable values, display labels and disabled states.
`value`	`string[]`	`—`	Controlled selected values.
`onValueChange`	`(value: string[]) => void`	`—`	Runs whenever the selection changes.
`maxSelected`	`number`	`—`	Maximum number of simultaneously selected options.
`maxCount`	`number`	`2`	Visible chips before the remaining count is collapsed.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.