A text input combined with a filterable dropdown popup for selecting one or more items from a predefined list, with support for sizes, clearing, and multi-select chips.
import {
ComboboxClear,
ComboboxEmpty,
ComboboxInput,
ComboboxInputGroup,
ComboboxItem,
ComboboxItemIndicator,
ComboboxList,
ComboboxPopup,
ComboboxPortal,
ComboboxPositioner,
ComboboxRoot,
ComboboxTrigger,
} from "@/components/ui/combobox";
const fruits = [
{ label: "Apple", value: "apple" },
{ label: "Banana", value: "banana" },
{ label: "Orange", value: "orange" },
];
export function ExampleCombobox() {
return (
<div className="flex w-full items-center justify-center p-10">
<div className="w-full max-w-sm">
<ComboboxRoot items={fruits}>
<ComboboxInputGroup>
<ComboboxInput placeholder="Select fruit..." />
<ComboboxClear />
<ComboboxTrigger />
</ComboboxInputGroup>
<ComboboxPortal>
<ComboboxPositioner sideOffset={4}>
<ComboboxPopup>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList>
{(fruit: { label: string; value: string }) => (
<ComboboxItem key={fruit.value} value={fruit}>
<ComboboxItemIndicator />
<span>{fruit.label}</span>
</ComboboxItem>
)}
</ComboboxList>
</ComboboxPopup>
</ComboboxPositioner>
</ComboboxPortal>
</ComboboxRoot>
</div>
</div>
);
}
export default ExampleCombobox;