Switches

Switches

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>

How To Use

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.