Preview
Code
Select fruits
"use client"
import {
MultiSelect,
MultiSelectContent,
MultiSelectItem,
} from "@/components/ui/preskok-ui/multi-select"
const fruits = [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Cherry" },
{ id: 4, name: "Date" },
{ id: 5, name: "Elderberry" },
{ id: 6, name: "Fig" },
{ id: 7, name: "Grape" },
{ id: 8, name: "Honeydew" },
{ id: 9, name: "Kiwi" },
{ id: 10, name: "Lemon" },
{ id: 11, name: "Mango" },
{ id: 12, name: "Nectarine" },
{ id: 13, name: "Orange" },
{ id: 14, name: "Papaya" },
{ id: 15, name: "Quince" },
{ id: 16, name: "Raspberry" },
{ id: 17, name: "Strawberry" },
{ id: 18, name: "Tangerine" },
{ id: 19, name: "Ugli Fruit" },
{ id: 20, name: "Watermelon" },
]
export function Component() {
return (
<MultiSelect className="max-w-md" placeholder="Select fruits">
<MultiSelectContent items={fruits}>
{(fruit) => (
<MultiSelectItem id={fruit.id}>{fruit.name}</MultiSelectItem>
)}
</MultiSelectContent>
</MultiSelect>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx preskok-ui@latest add multi-select
Usage
import {
MultiSelect,
MultiSelectContent,
MultiSelectItem,
} from "@/components/ui/preskok-ui/multi-select"
const assignees = [
{ id: "ana", name: "Ana" },
{ id: "max", name: "Max" },
]
export function MultiSelectDemo() {
return (
<MultiSelect placeholder="Select assignees">
<MultiSelectContent items={assignees}>
{(assignee) => (
<MultiSelectItem id={assignee.id}>{assignee.name}</MultiSelectItem>
)}
</MultiSelectContent>
</MultiSelect>
)
}