Toggle Switch

A Toggle Switch enables users to choose between two oppositional values (i.e., on or off, yes or no, red or blue.)

Usage

Toggles should be clearly labeled. The default behavior should be the option users are most likely to choose or assume to be true.

Example

Sample of a Toggle Switch 
<pre>
<code>&lt;label for="slider-1" class="main switch"&gt;
    &lt;input type="checkbox" id="slider-1" value="false" tabindex="0" aria-checked="false" aria-invalid="false" /&gt;
    &lt;span class="wrapper"&gt;
        &lt;span class="track"&gt;&lt;/span&gt;
        &lt;span class="slider"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="text-indicator"&gt;No&lt;/span&gt;
&lt;/label&gt;</code></pre>