Segmented control

UsageCopy Anchor Link

import { SegmentedControl } from "@gpuixui/components/segmented-control";

const [view, setView] = useState("list");

<SegmentedControl
  label="View"
  value={view}
  onValueChange={setView}
  items={[
    { value: "list", label: "List", icon: "list" },
    { value: "board", label: "Board", icon: "grid" },
  ]}
/>;

CompositionCopy Anchor Link

SegmentedControl (the muted track, one tab stop)
└── segment × n (the primitives' action; the chosen one raised)

APICopy Anchor Link

BehaviourCopy Anchor Link

• The arrow keys select as they move and stop at either end, skipping a disabled segment — a Mac segmented control's rule, not a tab list's. Focus follows the choice.
• Segments share the track's width equally.

The chosen segmentCopy Anchor Link

The chosen segment is the surface raised off the track. In a light theme that is the page's background; in a dark theme the page is darker than the track, so it lifts the track colour toward white instead.

Edit this page on GitHubpackages/components/docs/segmented-control.mdx