"use client"
import { ComboBox } from "@/components/ui/preskok-ui/combo-box"
type City = { id: string; name: string }
const cities: Array<City> = [
{ id: "nyc", name: "New York" },
{ id: "ldn", name: "London" },
{ id: "tko", name: "Tokyo" },
]
export function ComboBoxPreskokDemo() {
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>
)
}
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>
)
}