Segmented Control

Mutually exclusive option selector. Each segment is a button; only one can be active at a time. Supports icon + label, size variants, and disabled segments.

Open Segmented Control Playground

Anatomy

1 2
  1. 1 Track — pill-shaped container that groups all segments
  2. 2 Segment — individual button; active segment has an elevated indicator

Options

States

Default
Hover
Selected
Disabled

Size variants

sm
md (default)
lg

Icon + label

Icon + label

Table of options

PropertyValuesDefault
ariaLabelstring—
sizesm / md / lgmd
labelstring—
selectedtrue / falsefalse
disabledtrue / falsefalse
iconicon name / nonenone

Keyboard interactions

KeyAction
TabMoves focus into/out of the segmented control
← / →Moves between segments
Enter / SpaceActivates the focused segment

Accessibility

  • The container uses role="group" with aria-label to describe the purpose.
  • Each segment uses aria-pressed to communicate selected state.
  • Disabled segments carry disabled and aria-disabled="true".

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Keyboard interactionsArrow key navigation within group.
✓
Design tokensComponent-scoped tokens (--uif-segmented-control-*).
✓
Size variantssm, md (default), lg.
✓
Disabled segmentsIndividual segments can be disabled.