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.

Component elements
1
Track
2
Thumb

Colors and styles

The track switches style when it is on.

Element
Color / Style name
1
Thumb
style-thumb
This is some text inside of a div block.
2
Track
style-indent
This is some text inside of a div block.
3
Track
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Track
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Track
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Thumb
style-thumb
This is some text inside of a div block.
This is some text inside of a div block.
2
Track
style-indent
This is some text inside of a div block.
This is some text inside of a div block.
3
Track
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
No items found.
Element
Text style
No items found.

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Toggle switch
Component state
Element
Style
Unchecked
Track
style-indent-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Track
style-indent-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Track
style-indent-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Track
style-indent-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Track
style-indent-disabled
Thumb
style-thumb-disabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Checked
Track
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Submit feedback