Selection · §5.6

Switch

An on/off setting that applies at once.

Size
Theme
Contrast
Language
Motion
Text size

Code

<Switch checked={on} id="sounds" onCheckedChange={setOn} />

Accessibility

  • role="switch" with the state announced; the label names the setting.

Usage

Do

  • Settings that apply immediately.

Don't

  • Don't use a switch for an action.

Platforms

Web
apps/web/components/ui/switch.tsx
iOS
SwiftUI Toggle
Android
Compose Switch