Switch

Toggle switch for binary on/off states with smooth animation.

Basic Switch

Simple toggle switch

With Label

Switch with label text

Controlled

Controlled switch with state

Sizes

Small and medium switch sizes

With Helper Text

Switch with additional description

Adds an extra layer of security to your account

Disabled State

Disabled switches

PropTypeDefaultDescription
labelstringundefinedLabel text for the switch
size'small' | 'medium''medium'Size of the switch
helperTextstringundefinedHelper text below the switch
checkedbooleanundefinedControlled checked state
disabledbooleanfalseDisabled state

check_circleWhen to use

  • Use for settings that take effect immediately
  • Use for binary choices (on/off, yes/no)
  • Provide clear labels that describe the setting

cancelWhen not to use

  • Don't use for form submissions (use checkbox instead)
  • Don't use for choices that require confirmation
  • Don't use for selecting multiple items from a list