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