logologo

Switch

Custom switch

A switch has the markup of a custom checkbox but uses the .form-switch class to render atoggle switch.

Icons switch

Use the.switch-state-*icon-state-*through defined icons switches.

Unchecked switch

Use the.bg-*class through created default switches.

Borders with icons

Use the.icon-state-*.switch-outline-*class through created outline and icons.

Disabled outline switch

Use the .switch-outlineclass through created outline.

Variation of switches

Use the.tgl-skewed/tgl-flipclass through created variations.

  • Skewed

  • Flip

  • Checked

  • Flat

Switch sizing

Use the.switch-sm-*.switch-lg-*class through defined switch sizing.

Switch with Icons

Use the.icon-stateclass through visible icons in switches.