Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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" },
]}
/>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.
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.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.