#### Switch

Loading...

#### 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.

Primary Switch
Secondary Switch
Success Switch
Danger Switch
Warning Switch
Info Switch
Dark Switch

#### Unchecked switch

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

Unchecked Primary Switch
Unchecked Secondary Switch
Unchecked Success Switch
Unchecked Danger Switch
Unchecked Warning Switch
Unchecked Info Switch
Unchecked Dark Switch

#### Borders with icons

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

Bordered Primary Switch
Bordered Secondary Switch
Bordered Success Switch
Bordered Danger Switch
Bordered Warning Switch
Bordered Info Switch
Bordered Dark Switch

#### 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.

Small Size
Small Size Unhecked
Normal Size
Normal Unhecked
Disabled State
Large Size
Large Unhecked
Disabled

#### Switch with Icons

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

Small Size
Small Size Unhecked
Normal Size
Normal Unhecked
Disabled With Icon
Large Size
Large Unhecked
Disabled