Skip to content
Primer Design System

Primer Design System

Toggle switch

Toggle switch is used to immediately toggle a setting on or off.

On this page

  • Updated 29 Apr 2024

Playground

No preview available
focused
checked
size
state
label position

Props

NameTypeValuesDefault
focusedBooleantrue false false
sizeVariantmedium small medium
stateVariantrest active hover loading rest
checkedVariantfalse true true
label positionVariantstart end start

focused

focused: false, size: medium, state: rest, checked: true, label position: start
false
focused: true, size: medium, state: rest, checked: true, label position: start
true

size

focused: false, size: medium, state: rest, checked: true, label position: start
medium
focused: false, size: small, state: rest, checked: true, label position: start
small

state

focused: false, size: medium, state: rest, checked: true, label position: start
rest
focused: false, size: medium, state: active, checked: true, label position: start
active
focused: false, size: medium, state: hover, checked: true, label position: start
hover
focused: false, size: medium, state: loading, checked: true, label position: start
loading

checked

focused: false, size: medium, state: rest, checked: true, label position: start
true
focused: false, size: medium, state: rest, checked: false, label position: start
false