"use client"
import {
ComboBox,
ComboBoxContent,
ComboBoxInput,
ComboBoxItem,
} from "@/components/ui/preskok-ui/combo-box"
export function Component() {
return (
<ComboBox name="user" aria-label="Users">
<ComboBoxInput placeholder="Select a user" />
<ComboBoxContent items={users}>
{(item) => (
<ComboBoxItem id={item.id} textValue={item.name}>
{item.name}
</ComboBoxItem>
)}
</ComboBoxContent>
</ComboBox>
)
}
const users = [
{
id: 1,
name: "Barbara Kirlin Sr.",
image_url: "https://i.pravatar.cc/150?img=1",
},
{
id: 2,
name: "Rosemarie Koch",
image_url: "https://i.pravatar.cc/150?img=2",
},
{
id: 3,
name: "Mrs. Reva Heaney Jr.",
image_url: "https://i.pravatar.cc/150?img=3",
},
{
id: 4,
name: "Ms. Ettie Abshire DVM",
image_url: "https://i.pravatar.cc/150?img=4",
},
{
id: 5,
name: "Bria Ziemann",
image_url: "https://i.pravatar.cc/150?img=5",
},
{
id: 6,
name: "Heloise Borer Sr.",
image_url: "https://i.pravatar.cc/150?img=6",
},
{
id: 7,
name: "Miss Jacinthe Gerlach DVM",
image_url: "https://i.pravatar.cc/150?img=7",
},
{
id: 8,
name: "Miss Stephania Schaefer Sr.",
image_url: "https://i.pravatar.cc/150?img=8",
},
{
id: 9,
name: "Kevon Hackett MD",
image_url: "https://i.pravatar.cc/150?img=9",
},
{
id: 10,
name: "Tom Ledner",
image_url: "https://i.pravatar.cc/150?img=10",
},
]
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add combo-box
Usage
import { ComboBox } from "@/registry/preskok/ui/preskok-ui/combo-box"
type City = { id: string; name: string }
const cities: City[] = [
{ id: "nyc", name: "New York" },
{ id: "ldn", name: "London" },
{ id: "tko", name: "Tokyo" },
]
export function ComboBoxDemo() {
return (
<ComboBox label="City">
<ComboBox.Input placeholder="Search cities" />
<ComboBox.List items={cities}>
{(item: City) => (
<ComboBox.Option id={item.id} textValue={item.name}>
{item.name}
</ComboBox.Option>
)}
</ComboBox.List>
</ComboBox>
)
}