navigation / stable

SegmentedControl

An exclusive pill switcher for alternate presentations of the same data. Same look and sliding pill as Tabs, but a radiogroup with no panels.

LIVE PREVIEW

Loading preview…

When to use

Switching Board and List views of one collection.
Switching a calendar period or chart type.

Consider an alternative

Switching sections that own their own content (tabpanels) — use Tabs.
Turning a setting on or off — use Switch.
More than about five choices — use Select.

Import

import { SegmentedControl } from '@revido-llc/kit';

Keyboard interaction

ArrowLeft / ArrowRight — move focus
Space / Enter — select focused option

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


aria-label (required)	string	—
onChange (required)	(value: T) => void	—
options (required)	readonly SegmentedControlOption<T>[]	—
value (required)	T	—
className	string	—
hideLabelsBelow	"sm" \| "md"	—	Hide the labels visually below this breakpoint (icons stay; the label stays the accessible name). For view switches in tight toolbars on small screens. Every option needs a `leading` visual.
iconOnly	boolean	false
size	"sm" \| "md"	"md"

Examples

View switcher

<SegmentedControl aria-label="Project view" value={view} onChange={setView} options={[{ value: "board", label: "Board", leading: { kind: "icon", icon: <LayoutGrid /> } }, { value: "list", label: "List", leading: { kind: "icon", icon: <List /> } }]} />

Sizes

<SegmentedControl aria-label="View" size="sm" value={view} onChange={setView} options={viewOptions} />

Icon only

<SegmentedControl aria-label="Project view" iconOnly value={view} onChange={setView} options={viewOptions} />

Compact on small screens

Labels hide below sm (icons stay; the label is still the accessible name) — for view switches in a ViewToolbar.

<SegmentedControl aria-label="Project view" hideLabelsBelow="sm" value={view} onChange={setView} options={viewOptions} />

Text only

<SegmentedControl aria-label="Calendar period" value={period} onChange={setPeriod} options={[{ value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }]} />

Literal anatomy

Static component anatomy; bind events in the consuming app.

<SegmentedControl aria-label="Layout" value="list" options={[{ value: "list", label: "List" }, { value: "board", label: "Board" }]} />