A single-choice control with a gliding thumb, on Base UI's RadioGroup: one tab stop, arrow keys move the selection, Home/End, and form submission through name.
import { Segmented } from "@/components/eased/segmented/segmented";
<Segmented
aria-label="Date range"
options={[
{ value: "7d", label: "7 days" },
{ value: "30d", label: "30 days" },
{ value: "12m", label: "12 mo" },
]}
value={range}
onValueChange={setRange}
/>| Prop | Type | Default | |
|---|---|---|---|
options | { value, label?, icon?, "aria-label"?, disabled? }[] | Icon-only segments need an aria-label. | |
value / defaultValue | V | first option | Controlled or uncontrolled. |
onValueChange | (value: V) => void | ||
size | "sm" | "md" | "sm" | 32px for dense UI and headers, 36px for forms and settings. |
fullWidth | boolean | false | Fill the container and split it equally. |
name | string | Submits the value with a form. | |
disabled | boolean | ||
aria-label / aria-labelledby | string | Name the group. |
Motion signature: the thumb glides to the new segment on the snappy spring and stays concentric with the track (its radius is the track's minus padding and border); labels only darken, they never change weight.