Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
The import and the props worth knowing about, in one place.
import { FilterSegmented } from "@/components/beste/component/filter-segmented";
<FilterSegmented
label="Gender"
defaultValue="women"
onChange={(value) => console.log("selected:", value)} // null when cleared
options={[
{ label: "Women", value: "women" },
{ label: "Men", value: "men" },
{ label: "Kids", value: "kids" },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterSegmented } from "@/components/beste/component/filter-segmented";
<FilterSegmented
label="Gender"
defaultValue="women"
options={[{"label":"All","value":"all"},{"label":"Women","value":"women"},{"label":"Men","value":"men"},{"label":"Kids","value":"kids"}]}
/>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.
| Arrow keys | Move through the segments; the value follows as you go. |
|---|---|
| Home / End | Jump to the first or the last segment. |
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 control |
options | FilterSegmentedOption[] | — | |
value | string | null | — | Controlled selection; omit to let the component manage its own state |
defaultValue | string | — | Initial selection when uncontrolled |
allowClear | boolean | — | Clicking the active segment clears the selection (default true) |
onChange | (value: string | null) => void | — | |
className | string | — |
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.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.