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.
The import and the props worth knowing about, in one place.
import { FilterSelect } from "@/components/beste/component/filter-select";
<FilterSelect
label="Category"
placeholder="All categories"
clearLabel="All categories" // first item that clears the selection
onChange={(value) => console.log("selected:", value)} // null when cleared
options={[
{ label: "Sneakers", value: "sneakers", count: 24 },
{ label: "T-Shirts", value: "t-shirts", count: 18 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterSelect } from "@/components/beste/component/filter-select";
<FilterSelect
label="Category"
placeholder="All categories"
clearLabel="All categories"
className="w-64"
defaultValue="sneakers"
options={[{"label":"Sneakers","value":"sneakers","count":24},{"label":"T-Shirts","value":"t-shirts","count":18},{"label":"Hoodies","value":"hoodies","count":9},{"label":"Accessories","value":"accessories","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.
| Enter / Space | Open the menu. |
|---|---|
| Arrow keys | Move through the options; the value follows as you go. |
| Type a letter | Jump to the next option starting with it. |
| Escape | Close and keep what was there before. |
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 | FilterSelectOption[] | — | |
value | string | null | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string | — | Initial selection when uncontrolled |
placeholder | string | — | Placeholder shown while nothing is selected |
clearLabel | string | — | When set, renders a first item (e.g. "All categories") that clears the selection and reports null through onChange. |
disabled | boolean | — | |
onChange | (value: string | null) => void | — | |
className | string | — |
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.