Shadcn multi select - v0 by Vercel

Multi-Select Component for shadcn/ui

I'll create a custom multi-select component that follows shadcn/ui's design patterns. The standard Select component in shadcn/ui only supports single selection 1, so we'll need to build a custom component for multiple selections.

How to Use

The MultiSelect component allows users to select multiple options from a dropdown list. Here's how to use it:

Import the component:

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

Define your options and state:

const options = [
  { label: "Option 1", value: "option1" },
  { label: "Option 2", value: "option2" },
  // ...more options
]

const [selected, setSelected] = useState<string[]>([])

Use the component:

<MultiSelect
  options={options}
  selected={selected}
  onChange={setSelected}
  placeholder="Select options..."
/>

Features

Select multiple options from a dropdown
Search functionality to filter options
Keyboard navigation support
Accessible design with proper ARIA attributes
Customizable styling through className props
Selected items displayed as removable badges
Disabled state support for both the entire component and individual options

Integration with Forms

You can easily integrate this with React Hook Form 2 or any other form library by connecting the selected state and onChange handler to your form state management.