Toggle Switch
Switches toggle the state of a single setting on or off. Material Design 3 switches feature a track and handle design with distinct selected and unselected states.
Live Preview
Settings
Dark Mode
Use dark theme throughout the app
Notifications
Receive push notifications
Auto-save
Automatically save your changes
Analytics
Share anonymous usage data
With Icon
Wi-Fi
Disabled States
Disabled (off)
Disabled (on)
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| track.width | dimension | 52px | 52px | 52px |
| track.height | dimension | 32px | 32px | 32px |
| track.borderRadius | dimension | 16px | 16px | 16px |
| handle.sizeSelected | dimension | 24px | 24px | 24px |
| handle.sizeUnselected | dimension | 16px | 16px | 16px |
| selected.trackColor | color | #6750A4 | #038012 | #1A5129 |
| selected.handleColor | color | #FFFFFF | #FFFFFF | #FFFFFF |
| unselected.trackColor | color | #79747E | #79747E | #79747E |
| unselected.handleColor | color | #FEF7FF | #FEF7FF | #FEF7FF |
| disabled.trackColor | color | #E7E0EC | #E7E0EC | #E7E0EC |
| touchTarget.minSize | dimension | 48px | 48px | 48px |
Usage Guidelines
- Use switches for binary on/off settings that take effect immediately
- Use a checkbox instead if the user must take an additional action (like clicking a save button) for the change to take effect
- Position the switch to the right of the label for consistency
- Provide clear feedback with appropriate labels or descriptions
- Consider adding icons to the handle to reinforce the state