Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
The import and the props worth knowing about, in one place.
import { FilterCheckbox } from "@/components/beste/component/filter-checkbox";
<FilterCheckbox
label="Category"
defaultValue={["sneakers"]} // uncontrolled initial selection
onChange={(value) => console.log("selected:", value)}
options={[
{ label: "Sneakers", value: "sneakers", count: 24 },
{ label: "T-Shirts", value: "t-shirts", count: 18 },
]}
/>
// Controlled: pass `value` and keep it in your own state
<FilterCheckbox
options={[{ label: "Sneakers", value: "sneakers" }]}
value={["sneakers"]}
onChange={(value) => console.log("selected:", value)}
/>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 list |
options | FilterCheckboxOption[] | — | |
value | string[] | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string[] | — | Initial selection when uncontrolled |
onChange | (value: string[]) => void | — | |
className | string | — |