Component registry

Switch row

One setting with a label, explanation and on or off control.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/kit · kit.switchRow({ name, label, hint, on })

Anatomy

  • labelsetting name
  • hinteffect of setting
  • switchcurrent value

Props

name
string
label
string
hint
string?
on
boolean

Behavior and accessibility

States
off · on · disabled
Tokens
color.bg.raised · 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
Label and hint describe the switch; announce on or off. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use a ListItem with a Material 3 Switch trailing control.

Material 3 container: Surface

iOS · SwiftUI

Use Toggle with a supporting text label.

Example definition

{
  "schema": "design.component@1",
  "name": "switch-row",
  "props": {
    "name": "contrast",
    "label": "More contrast",
    "on": false
  }
}

Other components