Switch

A toggle switch enables users with a familiar way to turn an option on or off.

The toggle binds to a hidden checkbox and supports <label> elements. Any <label> should use a data-for attribute instead of a for, so the document remains valid until the switch's script can inject the input. The switch component's render method will update any data-for attributes to for. To use in a form, use a data-name attribute.

A switch's state can be one of the following:

On - A switch that has been turned on
Off - A switch that has been turned off
Disabled On - A switch that has been turned on and doesn't allow interactions
Disabled Off - A switch that has been turned off and doesn't allow interactions

    <div class="switch margin-1-b" data-name="switch-1" aria-checked="true"></div>
    <div class="switch margin-1-b" data-name="switch-2"></div>
    <div class="switch margin-1-b" data-name="switch-3" aria-checked="true" aria-disabled="true"></div>
    <div class="switch" data-name="switch-4" aria-disabled="true"></div>