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.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.