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 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterCombobox } from "@/components/beste/component/filter-combobox";
<FilterCombobox
label="Brand"
placeholder="All brands"
searchPlaceholder="Search brands"
className="w-64"
defaultValue={["acme"]}
options={[{"label":"Acme Supply","value":"acme","count":18},{"label":"Northwind","value":"northwind","count":12},{"label":"Globex","value":"globex","count":9},{"label":"Initech","value":"initech","count":7},{"label":"Umbra Works","value":"umbra","count":5},{"label":"Vandelay","value":"vandelay","count":4}]}
/>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 | — |
Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.