Audi
BMW
Mercedes-Benz
Volkswagen
Ford
"use client"
import { ListBox, ListBoxItem } from "@/components/ui/preskok-ui/list-box"
export function ListBoxPreskokDemo() {
return (
<ListBox
className="max-w-2xs"
items={cars}
selectionMode="single"
aria-label="Cars"
>
{(item) => <ListBoxItem id={item.id}>{item.name}</ListBoxItem>}
</ListBox>
)
}
const cars = [
{ id: "1", name: "Audi" },
{ id: "2", name: "BMW" },
{ id: "3", name: "Mercedes-Benz" },
{ id: "4", name: "Volkswagen" },
{ id: "5", name: "Ford" },
]
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add list-box
Usage
import { ListBox, ListBoxItem } from "@/registry/preskok/ui/preskok-ui/list-box"
export function Example() {
return (
<ListBox aria-label="Options">
<ListBoxItem id="a">A</ListBoxItem>
<ListBoxItem id="b">B</ListBoxItem>
</ListBox>
)
}