An on-off is actually a checkbox with an on-off outlook.
<p>
<!-- On-off -->
<label class="z-on-off">
<input type="checkbox">
<span class="z-on-off-lever"></span>
</label>
<!-- Small On-off -->
<label class="z-on-off small">
...
</label>
</p>
<br>
<p>
<!-- Disabled On-off -->
<label class="z-on-off">
<input type="checkbox" disabled>
<span class="z-on-off-lever"></span>
</label>
</p>
<p>
<!-- Colors -->
<label class="z-on-off green">
<input type="checkbox" checked>
<span class="z-on-off-lever"></span>
</label>
<label class="z-on-off red">
<input type="checkbox" checked>
<span class="z-on-off-lever"></span>
</label>
<label class="z-on-off teal">
<input type="checkbox" checked>
<span class="z-on-off-lever"></span>
</label>
<label class="z-on-off yellow">
<input type="checkbox" checked>
<span class="z-on-off-lever"></span>
</label>
<label class="z-on-off purple">
<input type="checkbox" checked>
<span class="z-on-off-lever"></span>
</label>
</p>