Segmented

Zwei bis fünf sich ausschließende Optionen auf einer Spur; die aktive erhaben, gleitet 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
Der zugängliche Name des Steuerelements.
defaultValue
string
Die gewählte Option beim ersten Rendern.
disabled
boolean
Deaktiviert jedes Segment.
fullWidth
boolean
Füllt die Breite seines Containers.
onValueChange
((value: string) => void)
Wird mit der gewählten Option aufgerufen.
options
SegmentedOption[]
Die Optionen, als Segmente.
size
"md" | "sm" = md
Die Höhe des Steuerelements.
value
string
Die gewählte Option, bei gesteuertem Wert.