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" },
]}
/>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 | — |