Toggle switch
Updated:
March 18, 2020
A toggle switch is used to toggle between an on and off state.
Variations
The toggle switch thumb changes position from left to right when turned on.
Off
The toggle switch thumb is flipped to the left in an off state.
Off
The toggle switch thumb is flipped to the left in an off state.
On
When turned on, the thumb is positioned to the right, and the style is changed to the "running style".
On
When turned on, the thumb is positioned to the right, and the style is changed to the "running style".
Component building blocks
How the component are built up and styled in both off and on state.
Anatomy
The toggle switch is built up by a track that shows the room to slide within, and a thumb that moves depending on the state.
Colors and styles
The track switches style when it is on.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
States
The look of the states are defined by the style.
