SegmentedControl

Interactive

See SegmentedControl in Storybook for every variant, with live controls.

A compact switch between a few mutually exclusive views or ranges. Unlike Tabs, it doesn't imply a page section — use it for filters, time ranges and view modes.

import { SegmentedControl } from "@kairosis/eidos";

<SegmentedControl
  label="Time range"
  options={["1h", "24h", "7d", "30d"]}
  value={range}
  onChange={setRange}
/>;

Props

Prop	Type	Default	Description
options	(string | SegmentDef)[]	—	Required. A bare string is shorthand for { value, label }
value	string	—	Required. Selected value
onChange	(value: string) => void	—
size	"sm" | "md"	"md"	28 or 36px overall
label	string	—	Accessible name for the group

SegmentDef is { value, label, icon? }.

Guidelines

• Two to four segments. Beyond that, use Select or Tabs.
• The group is recessed onto --bg and the selected segment rises to --bg-elevated — inverse of how a raised control reads.
• Keep labels short and equal in weight; segments size to content, so a long one unbalances the group.