Mono provides a variety of Switches components thats suit its design standards. To add or customize Switches go to _switches.scss and edit or create your own.

Default Switches


<label class="switch switch-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-secondary  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-success  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-info  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-warning  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-danger  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-dark  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Outline Switches


<label class="switch switch-outline-primary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-secondary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-success form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-info form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-warning form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-danger form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Switches


<label class="switch switch-outline-alt-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Switches with Text




          

Outline Switches with Text


<label class="switch switch-text switch-outline-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Switches with Text


<label class="switch switch-text switch-outline-alt-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

Switches with Icon


<label class="switch switch-icon switch-primary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-secondary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-success form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-info form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-warning form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-danger form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-dark form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Outline Switches with Icon


<label class="switch switch-icon switch-outline-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Switches with Icon

    

    
              

Default Pill switches


<label class="switch switch-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-danger switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-dark switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Outline Pill Switches


<label class="switch switch-outline-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-danger switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-dark switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Pill Switches


<label class="switch switch-outline-alt-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-danger switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Pill Switches with Text


<label class="switch switch-text switch-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-danger switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

Outline Pill Switches with Text


<label class="switch switch-text switch-outline-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Pill Switches with Text


<label class="switch switch-text switch-outline-alt-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

Pill Switches with Icon


<label class="switch switch-icon switch-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Outline Pill Switches with Icon


<label class="switch switch-icon switch-outline-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Alternative Outline Pill Switches with Icon


<label class="switch switch-icon switch-outline-alt-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

Contacts

Add New