SegmentedControl

A track of options where one shared selection slides between segments, scrolling with edge fades when it overflows.

When to use

• Switching between a small set of related views or filters: Table, Board, Calendar; time ranges.
• Options can carry an accessory, such as a count badge.
• For one choice that needs a description per option use RadioGroup; for page-level sections use Tabs; for billing periods with a savings note use BillingToggle.

Usage

import SegmentedControl from "@/components/iris/segmented-control/segmented-control";
function ViewSwitch() {
  const [view, setView] = React.useState("board");
  return h(SegmentedControl, {
    label: "View",
    value: view,
    onValueChange: setView,
    options: [
      { value: "table", label: "Table" },
      { value: "board", label: "Board" },
      { value: "calendar", label: "Calendar" },
    ],
  });
}

Props

Prop	Type	Default	Description
options	{ value: string; label: string; accessory?: ReactNode }[]	required	Segments; accessory renders after the label.
value	string	required	Selected value (controlled).
onValueChange	(value: string) => void	required	Called with the new value.
label	string	–	Accessible name for the group.
onOptionIntent	(value: string) => void	–	Called on pointer enter or focus, before choosing; use it to start loading what that option shows.
className	string	–	Extra classes on the root.

Notes

• role="group" of buttons with aria-pressed; only the selected one is a tab stop, and Arrow keys, Home and End move the selection like a tab list.
• When the options overflow their container the track scrolls inside itself, fades only the side with more content, and keeps the selected option in view.
• Reduced motion snaps the selection instead of sliding it. Reads --hover, --line, --surface, --ink, --ink-3, --radius-button and the resting shadow.