Segmented Control

Button group for selecting from mutually exclusive options. Commonly used for switching between views or modes.

Basic

Simple segmented control with text labels.

Selected: grid

Options can include icons alongside labels.

Tool: pointer

Compact variant with just icons (must provide aria-label).

Selected: pointer

Segmented controls come in three sizes.

Segmented control can expand to fill its container.

Individual options can be disabled.

Note: "Reverse" is disabled

Segmented control has different visual states.

Normal

Disabled

Common segmented control use cases in a DAW interface.

OSC Waveform

Snap

Tool

Supports both controlled and uncontrolled patterns.

Uncontrolled (internal state)

Controlled (parent state)

Segmented control supports full keyboard navigation.