Selection · §5.22

Segmented control

Switches between views with a sliding thumb.

Size
Width
Theme
Contrast
Language
Motion
Text size

Code

<SegmentedControl aria-label="Board view" onValueChange={setView} options={options} value={view} />

Accessibility

  • A radio group: one tab stop, arrows move and select.

Usage

Do

  • 2–4 views of the same data.

Don't

  • Never for settings.

Platforms

Web
apps/web/components/edflow/segmented-control.tsx
iOS
SwiftUI Picker(.segmented)
Android
Compose SingleChoiceSegmentedButtonRow