MultiSelect

Basic

Color Palette

Large List (54 countries)

Rich Items

Disabled

MultiSelect

A multi-item select with checkboxes, search input, and chip display for selected values. Consumers render MultiSelectItem children; the component manages selection state internally.

Usage

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

const options = [
  { value: "a", label: "Option A" },
  { value: "b", label: "Option B" },
]

<MultiSelect
  color="emerald"
  placeholder="Select..."
  placeholderSearch="Search..."
  onValueChange={(values) => console.log(values)}
>
  {options.map((o) => (
    <MultiSelectItem key={o.value} value={o.value}>
      {o.label}
    </MultiSelectItem>
  ))}
</MultiSelect>

MultiSelect

Prop	Type	Default	Description
color	"slate" \| "blue" \| "cyan" \| "teal" \| "emerald" \| "green" \| "indigo" \| "violet" \| "purple" \| "pink" \| "rose" \| "red" \| "orange" \| "amber"	"slate"	Color palette applied to the checkbox fill and selected chips.
onValueChange	(value: string[]) => void	—	Called with the updated array of selected values whenever selection changes.
placeholder	string	"Select..."	Placeholder shown in the trigger button when nothing is selected.
placeholderSearch	string	"Search..."	Placeholder shown in the search input inside the popover.
renderItem	(entry: { value: string; label: string }) => React.ReactNode	—	Custom renderer for each dropdown option. The chip label still uses the children text.
disabled	boolean	false	Disables the trigger button and prevents the popover from opening.
className	string	—	Extra classes applied to the trigger button.
children*	React.ReactNode	—	MultiSelectItem elements to render as options.

MultiSelectItem

Prop	Type	Default	Description
value*	string	—	Unique identifier for this option. Returned in the onValueChange array.
children*	React.ReactNode	—	Label displayed in the list and in the selected chip.
className	string	—	Extra classes applied to the command item.