Segmented Control

Examples

Overview

import { SegmentedControl } from "@rogo-technologies/ui/segmented-control";

const RANGES = [
  { value: "7d", label: "7 days" },
  { value: "30d", label: "30 days" },
] as const;

<SegmentedControl ariaLabel="Date range" options={RANGES} value={range} onChange={setRange} />;

It wraps Base UI Radio, so roving focus, arrow-key selection, and aria-checked come from Base UI rather than hand-rolled key handlers. options is generic over your value union, so onChange hands back your own type, with no cast at the call site.

Usage

Segmented control or tabs?

Use Tabs variant="secondary" when the segments swap panels: it has the same pill treatment, plus tab semantics and an associated panel. Use SegmentedControl when the segments rescope one view that stays put: a chart's granularity, a table's filter, a page's view mode.

Animated chip

animateLayoutId slides one shared chip between segments instead of cross-fading each segment's background. The id only has to be unique among controls mounted at the same time; when a page renders responsive copies of the same control, derive it from useId().

<SegmentedControl animateLayoutId={useId()} ariaLabel="View mode" … />

Icon-only segments

iconOnly renders square segments with the icon alone and promotes each option's label to its accessible name, so the control stays screen-reader complete without visible text.

API

SegmentedControl

SegmentedControlOption

Guidelines

Do

• Reach for it when the segments rescope a view that stays in place.
• Keep labels to two or three short segments; more belongs in a Select.
• Give every control an ariaLabel that names what is being scoped.

Don't

• Don't use it to swap panels. That's Tabs variant="secondary".
• Don't hand-roll the track and chip out of buttons; that's what this replaces.
• Don't reuse one animateLayoutId across two simultaneously mounted controls.