Switches are used to toggle a single setting. They function very similar to a checkbox, but are used alone and not meant to make multiple choices within a group. They are typically used for a setting, such as “hide labels,” or “compact rows.”
<label for="switch1"> Normal</label>
<div class="input-switch">
<input id="switch1" type="checkbox" checked="checked" name="switch1">
<label aria-hidden="true" class="switch" for="switch1"></label>
</div>
<label for="switch2"> Disabled</label>
<div class="input-switch">
<input id="switch2" type="checkbox" checked="checked" disabled="disabled" name="switch2">
<label class="switch" for="switch2"></label>
</div>
<label for="switch3"> Accessibility</label>
<div class="input-switch input-switch-accessibility">
<input id="switch3" type="checkbox" checked="checked" name="switch3">
<label class="switch" for="switch3"></label>
</div>
Switches should be used to toggle a setting to a state of on/off. This can be seen in the Popovers section in more detail.
Checkboxes should not be used for toggling a setting to a state of on/off, active/inactive, etc.