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