Switch nativelite

A labelled on/off switch; bind checked.

Children: none

Preview

Loading the renderer…

labelrequired

namerequired

checked

description

disabled

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "start",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Switch",
          "label": "Auto-scan",
          "name": "autoScan",
          "checked": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Switch rendered by the React renderer on Web — **Web** React

Switch rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Switch rendered by the Compose renderer on Android — **Android** Compose

Switch rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-switch, painted by each native renderer.

Variants

disabled

Props

Prop	Type	Default	Description
`label`requiredbind	`string`	–	The text beside the switch.
`name`required	`string`	–	The field's key in the submitted data.
`checked`bind	`boolean`	`false`	The state; bind it.
`description`	`string`	–	A muted line under the label.
`disabled`	`boolean`	`false`	Shows it inert.

Events and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: switch
Semantics: switch; the label (and description) first, the switch at the end; the whole row toggles

Keys	Action
`SpaceEnter`	toggle

Theming

Recipe parts: Switch/rootSwitch/trackSwitch/thumbSwitch/labelSwitch/descriptionSwitch/body
Keyed by: checkeddisabled:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Toggle row

Label, an optional 12px description at 50%, and a 36×20 switch: on is the primary track with a primary-foreground thumb, off the active fill.

Webok

GlassToggleRowpackages/ui/src/glass-rows.tsx

iOSok

GlassToggleStyleapps/ios/ExpUI/Sources/GlassControls.swift

Androidok

SwitchRowapps/android/app/src/main/java/com/exponential/app/ui/components/SheetOptionRows.kt

Desktopok

surface::glass_toggle_rowapps/desktop/crates/ui/src/surface.rs

Switch

The 36×20 capsule that flips a setting the moment it is pressed — there is no Save beside one.

Off is the active fill under the foreground knob, on the primary fill under the primary-foreground knob, and the travel is one fast duration. It almost always rides a toggle ROW, which owns the label and the description; this is the bare control.

Webok

Switchpackages/ui/src/switch.tsx

iOSok

GlassToggleStyleapps/ios/ExpUI/Sources/GlassControls.swift

applied app-wide as .toggleStyle(.glass), so call sites keep the stock Toggle

Androidok

glassSwitchColors()apps/android/app/src/main/java/com/exponential/app/ui/components/SheetOptionRows.kt

the tokens for the stock M3 Switch; there is no GlassSwitch composable

Desktopok

controls::buttons::web_switchapps/desktop/crates/exponential-ui-gpui/src/controls/buttons.rs

a lint (only_controls_constructs_switches) refuses Switch::new anywhere else