Watch this part in video
Add the .switch class to an element to create a switch. Inside the switch, add an <input type="checkbox"> with the class .switch-input. Next to that, create a <label> with the class .switch-paddle.
Give the <input> a unique ID and point the <label> to it with the for attribute. This makes the switch clickable.
Inside the switch label is screen reader-only text, which uses the .show-for-sr class to visually mask the text.
Inspecting the value of the underlying input should be done by evaluating the checked property of said input.
Make sure the HTML of the switch goes in the order you see above—<input>, then <label>
<div class="switch">
<input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">Download Kittens</span>
</label>
</div>
There may be times when you want to fix a switch into a position. This can be accomplished by setting the disabled option on the switch input.
<div class="switch">
<input class="switch-input" disabled checked="checked" id="exampleCheckedDisabledSwitch" type="checkbox" name="exampleCheckedDisabledSwitch">
<label class="switch-paddle" for="exampleCheckedDisabledSwitch">
<span class="show-for-sr">Can't Touch This Checked</span>
</label>
</div>
<div class="switch">
<input class="switch-input" disabled id="exampleUncheckedDisabledSwitch" type="checkbox" name="exampleUncheckedDisabledSwitch">
<label class="switch-paddle" for="exampleUncheckedDisabledSwitch">
<span class="show-for-sr">Can't Touch This Unchecked</span>
</label>
</div>
You can also use <input type="radio"> instead of checkbox to create a series of options.
<div class="switch">
<input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
<label class="switch-paddle" for="exampleRadioSwitch1">
<span class="show-for-sr">Bulbasaur</span>
</label>
</div>
Use the classes .tiny, .small, or .large to change the switch size.
<div class="switch tiny">
<input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="tinySwitch">
<span class="show-for-sr">Tiny Sandwiches Enabled</span>
</label>
</div>
<div class="switch small">
<input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="smallSwitch">
<span class="show-for-sr">Small Portions Only</span>
</label>
</div>
<div class="switch large">
<input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="largeSwitch">
<span class="show-for-sr">Show Large Elephants</span>
</label>
</div>
You can place active and inactive text inside of a switch. The active text (.switch-active) only displays when the switch is on, and the inactive text (.switch-inactive) only displays when the switch is off.
Active/inactive text goes inside of the switch’s <label>.
Depending on the length of the words you place inside the switch, you may need to fine-tune the left or right CSS properties of the text to get it positioned right.
Add aria-hidden="true" to these labels to prevent AT from reading them.
<p>Do you like me?</p>
<div class="switch large">
<input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="yes-no">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Yes</span>
<span class="switch-inactive" aria-hidden="true">No</span>
</label>
</div>