Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
The import and the props worth knowing about, in one place.
import { FilterMultiselect } from "@/components/beste/component/filter-multiselect";
<FilterMultiselect
label="Size"
placeholder="All sizes"
defaultValue={["m"]}
onChange={(value) => console.log("selected:", value)}
options={[
{ label: "S", value: "s", count: 12 },
{ label: "M", value: "m", count: 28 },
{ label: "L", value: "l", count: 24 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterMultiselect } from "@/components/beste/component/filter-multiselect";
<FilterMultiselect
label="Size"
placeholder="All sizes"
className="w-64"
defaultValue={["m","l"]}
options={[{"label":"XS","value":"xs","count":6},{"label":"S","value":"s","count":12},{"label":"M","value":"m","count":28},{"label":"L","value":"l","count":24},{"label":"XL","value":"xl","count":11}]}
/>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.
| Tab | Move between the boxes — each is its own control, not one list with an inner cursor. |
|---|---|
| Space | Tick or untick the focused one. |
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 | FilterMultiselectOption[] | — | |
value | string[] | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string[] | — | Initial selection when uncontrolled |
placeholder | string | — | Trigger text while nothing is selected |
disabled | boolean | — | |
onChange | (value: string[]) => void | — | |
className | string | — |
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
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.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.