Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
The import and the props worth knowing about, in one place.
import { FilterToggle } from "@/components/beste/component/filter-toggle";
<FilterToggle
label="Deals"
defaultValue={["sale"]}
onChange={(value) => console.log("enabled:", value)}
options={[
{ label: "On sale", value: "sale" },
{ label: "New arrivals", value: "new" },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterToggle } from "@/components/beste/component/filter-toggle";
<FilterToggle
label="Deals"
className="w-56"
defaultValue={["sale"]}
options={[{"label":"On sale","value":"sale"},{"label":"New arrivals","value":"new"},{"label":"In stock only","value":"in-stock"}]}
/>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.
| Space / Enter | Flip the focused switch. The label points at it, so the whole row is the target. |
|---|
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 rows |
options | FilterToggleOption[] | — | |
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 | — |
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
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 button chips for compact option sets like sizes. Works controlled or uncontrolled.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.