Switch

Custom switch

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

Icons switch

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

Unchecked switch

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

Borders with icons

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

Disabled outline switch

Use the .switch-outline class through created outline.

Variation of switches

Use the .tgl-skewed/tgl-flip class through created variations.

  • Skewed

  • Flip

  • Checked

  • Flat

Switch sizing

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

Switch with Icons

Use the .icon-state class through visible icons in switches.