Toggle switch
A toggle switch is used to toggle between an on and off state.
Variations
The textbox can be used in a standard version and with steppers.
Toggle switch
The toggle switch turned off and on.
Specs
How the component are built up and styled in both off and on state.
Anatomy
The slider button are built up by a track that shows the room to slide the track, and a thumb that you can drag to do the action.
Components
1
Track
2
Thumb
Colors
The track switches style when it is on.
Element
Color / Style
1
Thumb
style-thumb
2
Track
style-indent
3
Active track
style-alert-running
Measures and spacing
The measurements are the same in both enabled and on states, but in the on state it is flipped horizontally.
1
Component measures
2
Spacing
3
Border sizes
States
The look of the states are defined by the style.
Off
Track
style-indent-enabled
Hover
Thumb
style-indent-hover
Pressed
Track
style-indent-pressed
Focused
Track
style-normal-focused
Disabled
Thumb
style-thumb-disabled
Track
style-indent-disabled
On
Track
style-alert-running