The new version of CoreUI is available. Please check the latest version.

Bootstrap switches

On this page:

Switch default

<label class="c-switch c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch default - pills

<label class="c-switch c-switch-pill c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline

<label class="c-switch c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline - pills

<label class="c-switch c-switch-pill c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch opposite

<label class="c-switch c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch opposite - pills

<label class="c-switch c-switch-pill c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch with text

<label class="c-switch c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline

<label class="c-switch c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text opposite

<label class="c-switch c-switch-label c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text opposite - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with icon

<label class="c-switch c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline

<label class="c-switch c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon opposite

<label class="c-switch c-switch-label c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon opposite - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-opposite-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

3D Switch

<label class="c-switch c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch sizes

<label class="c-switch c-switch-lg c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

<label class="c-switch c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

<label class="c-switch c-switch-sm c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>