Components
Loading preview...
An input combined with a list of predefined items to select.
npx shadcn@latest add https://21st.dev/r/coss.com/combobox"use client";
import {
Combobox,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxPopup,
} from "@/components/ui/combobox";
const items = [
{ label: "Apple", value: "apple" },
{ label: "Banana", value: "banana" },
{ label: "Orange", value: "orange" },
{ label: "Grape", value: "grape" },
{ label: "Strawberry", value: "strawberry" },
{ label: "Mango", value: "mango" },
{ label: "Pineapple", value: "pineapple" },
{ label: "Kiwi", value: "kiwi" },
{ label: "Peach", value: "peach" },
{ label: "Pear", value: "pear" },
];
export default function ComboboxDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8">
<div className="w-full max-w-sm">
<Combobox items={items}>
<ComboboxInput aria-label="Select a item" placeholder="Select a item…" />
<ComboboxPopup>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxPopup>
</Combobox>
</div>
</div>
);
}