SwitchUse switches to toggle a single option on or off, activate or deactivate, and switch between two different states.
Consider using switch instead of checkbox, when appropriate.
Consider using switch instead of radio buttons if there’s only two options to choose from.
- Overview
- Dev
Styles
| Property | Preview |
|---|---|
| Default |  |
| Light |  |
States
| Property | Default Style | Light Style |
|---|---|---|
| ON |  | |
| OFF |  |  |
| Disabled ON |  |  |
| Disabled OFF |  |  |
Spec
SizeCurrently, only one size available for the ToggleSwitch.
Colors
ON
Background color: $backgroundPrimaryHeavy
Knob color: $iconDefaultLight
OFF
Background color: $backgroundNeutralHeavy
Knob color: $iconDefaultLight
Disabled
Background color: $backgroundDisabled
Knob color: $iconDefaultLight
Haptic Haptic is played on tap. Haptic preset: [impactMedium]
PlaygroundCode Example
APIThis is the list of additional props for the component