Component registry

Segmented control

A small exclusive choice set with a visible current value.

All components · Kit documents · Definition as JSON

Live web demo

Light or dark

Web source: openvibe-shared/kit · kit.seg({ name, label, options, value })

Anatomy

  • labelchoice purpose
  • segmentsmutually exclusive values

Props

name
string
label
string
options
choice[]
value
string

Behavior and accessibility

States
default · selected · focused
Tokens
color.accent.strong · color.text.primary · size.tap
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Segmented control. Arrow keys move radio choices; announce selected value. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use SingleChoiceSegmentedButtonRow.

Material 3 container: SecondaryContainer

iOS · SwiftUI

Use Picker with .segmented style.

Example definition

{
  "schema": "design.component@1",
  "name": "segmented-control",
  "props": {
    "name": "scheme",
    "label": "Light or dark",
    "value": "auto"
  }
}

Other components