Segmented

Two to five exclusive options on a fill track; the active one raised, sliding in 180ms.

24h7d30d90d

<Segmented
      aria-label="Period"
      defaultValue="7d"
      options={[
        { value: "24h", label: "24h" },
        { value: "7d", label: "7d" },
        { value: "30d", label: "30d" },
        { value: "90d", label: "90d" },
      ]}
    />

import { Segmented } from "@logicplanes/kaeso-ui";

Props

aria-label
string
The control's accessible name.
defaultValue
string
The chosen option on first render.
disabled
boolean
Turns off every segment.
fullWidth
boolean
Fills the width of its container.
onValueChange
((value: string) => void)
Called with the chosen option.
options
SegmentedOption[]
The options, as segments.
size
"md" | "sm" = md
The control's height.
value
string
The chosen option, when you control it.