Component · input.switch
Switch
A binary toggle that immediately commits an on or off setting.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
track | yes | Background track indicating off and on. |
thumb | yes | Sliding thumb affordance. |
label | yes | Visible name of the setting. |
States
- default
- hover
- focus-visible
- on
- off
- disabled
Keyboard
- Space toggles the switch
- Enter may toggle where the platform convention allows
Accessibility
Expose a switch role with on/off state and a clear label. Do not use a switch for actions that only navigate; prefer a button or link for those cases.
Motion
Thumb travel may ease across the track; under reduced motion, jump to the on or off position.
Platform mappings
web
web
Native checkbox styled as a switch with switch role, or a button with aria-checked when appropriate.
apple
apple
SwiftUI Toggle or UISwitch.
android
android
Compose Switch.