SegmentedControl

Pill-styled radio group for filtering the current view. Use when the user picks one of 2–4 mutually exclusive options that change how data is displayed, not which page they're on.

Distinct from Tabs: SegmentedControl filters the current view's data (Day / Week / Month range, List / Map view). Tabs change navigational context.

Default#

Loading…

With icons#

Loading…

Sizes#

Props#

Props for SegmentedControl
Prop	Type	Default	Description
options *	`readonly SegmentedControlOption[]`	`—`	Options to render.
size	`enum`	`md`	Visual size. Default `md`.
fullWidth	`boolean \| undefined`	`false`	When true, stretches to fill the parent.
asChild	`boolean \| undefined`	`—`

Accessibility#

role="radiogroup" with one role="radio" per option. Radix wires it up.
Keyboard: Arrow keys move and select, Tab moves out of the group.
Always pass an aria-label describing what's being filtered.

Edit this page on GitHub →