Multi Select

Installation

npx shadcn@latest add @blank/multi-select

Usage

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

<MultiSelect
  options={[
    { value: "next", label: "Next.js" },
    { value: "astro", label: "Astro" },
  ]}
  defaultValue={["next"]}
  placeholder="Pick frameworks…"
/>

The field is the search box: type to filter, arrow keys move through the list, Enter toggles, Backspace in an empty field drops the last pick. Picked options stay in the list with a check, so a second Enter undoes a pick.

Multi Select takes an options array and does the rest. When you need custom rows or async data, compose Combobox with its chips instead.

Examples

Groups, limit and creating options

Options with a group are listed under a heading. Once maxCount is reached the remaining options dim, and picking one is refused through onMaxCount, so the reason can show in FieldError. creatable offers the typed text as a new option when nothing matches it exactly.

API Reference