Segmented Control
Choose one value from a compact row of options.
Preview
Import
import { SegmentedControl, SegmentedControlItem } from "@sigil-ui/components";Usage
"use client";
import { useState } from "react";
import { SegmentedControl, SegmentedControlItem } from "@sigil-ui/components";
function SegmentedControlPreview() {
const [period, setPeriod] = useState("Week");
return <div className="grid gap-[var(--s-space-16)] w-full">
<SegmentedControl value={period} onValueChange={setPeriod} aria-label="Report period">
{["Day", "Week", "Month"].map((value) => <SegmentedControlItem key={value} value={value}>{value}</SegmentedControlItem>)}
</SegmentedControl>
<p role="status" className="text-[var(--s-text-muted)] text-[length:var(--s-size-sm)]">Showing the {period.toLowerCase()} report.</p>
</div>;
}Sub-components
This component includes the following parts:
<SegmentedControlItem>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value (required) | string | — | The current controlled value. |
onValueChange (required) | (value: string) => void | — | Called when the user changes the value. |
children (required) | ReactNode | — | Content rendered inside the component. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-surface-sunken | Surface sunken |
--s-surface | Surface |
--s-border-style | Border style |
--s-border | Border |
--s-duration-fast | Duration fast |
--s-ring | Ring |
--s-primary | Primary |
--s-background | Background |
--s-text | Text |
--s-shadow-sm | Shadow sm |
--s-text-muted | Text muted |