shadcn multi select component
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.
The MultiSelect component allows users to select multiple options from a dropdown list. Here's how to use it:
import { MultiSelect } from "@/components/ui/multi-select"
const options = [
{ label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" },
// ...more options
]
const [selected, setSelected] = useState<string[]>([])
<MultiSelect
options={options}
selected={selected}
onChange={setSelected}
placeholder="Select options..."
/>
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.