Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
The import and the props worth knowing about, in one place.
import { FilterCombobox } from "@/components/beste/component/filter-combobox";
<FilterCombobox
label="Brand"
placeholder="All brands"
searchPlaceholder="Search brands"
multiple // omit for single-select
onChange={(value) => console.log("selected:", value)}
options={[
{ label: "Acme Supply", value: "acme", count: 18 },
{ label: "Northwind", value: "northwind", count: 12 },
]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Type anything | Filters the list as you go; the first match stays highlighted. |
|---|---|
| Arrow keys | Move through what is left after the filter. |
| Enter | Toggle the highlighted option. |
| Escape | Close the popover and leave the selection as it is. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional group heading rendered above the trigger |
options | FilterComboboxOption[] | — | |
value | string[] | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string[] | — | Initial selection when uncontrolled |
multiple | boolean | — | Allow selecting more than one option (default false) |
placeholder | string | — | Trigger text while nothing is selected |
searchPlaceholder | string | — | Placeholder of the search input inside the dropdown |
emptyText | string | — | Message shown when the search matches nothing |
disabled | boolean | — | |
onChange | (value: string[]) => void | — | |
className | string | — |