The toggle switch is semantically a checkbox, but mimics a tactile switch that can be turned on or off.

To make a checkbox appear as a toggle switch, use the '.sme-toggle-switch' class instead of '.sme-checkbox'.

The intermediate state is invalid for toggle switches. They should always be on or off.

Unselected

<div class="sme-toggle-switch"> <label> <input aria-label="Control label" type="checkbox" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>

Selected

<div class="sme-toggle-switch"> <label> <input aria-label="Control label" type="checkbox" checked="checked" aria-checked="true"> <span aria-hidden="true">Control label</span> </label> </div>

Disabled

<div class="sme-toggle-switch"> <label> <input aria-label="Control label" type="checkbox" disabled="disabled" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>

Disabled and Selected

<div class="sme-toggle-switch sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" checked="checked" disabled="disabled" aria-checked="true"> <span aria-hidden="true">Control label</span> </label> </div>