Accessible CSS toggle switch using standard form controls
Use the light switch, instead of a checkbox, for simple “On/Off” options.
<label class="switch-light" onclick="">
<input type="checkbox">
<strong>
Wireless
</strong>
<span class="alert alert-light">
<span>Off</span>
<span>On</span>
<a class="btn btn-primary"></a>
</span>
</label>
Use the toggle switches, instead of radio buttons, for two or more specific options.
<fieldset>
<legend>View</legend>
<div class="switch-toggle alert alert-light">
<input id="week" name="view" type="radio" checked>
<label for="week" onclick="">Week</label>
<input id="month" name="view" type="radio">
<label for="month" onclick="">Month</label>
<a class="btn btn-primary"></a>
</div>
</fieldset>
Add up to 6 options. No extra work needed.
<fieldset>
<legend>View</legend>
<div class="switch-toggle alert alert-light">
<input id="hour3" name="view3" type="radio" checked>
<label for="hour3" onclick="">Hour</label>
<input id="day4" name="view3" type="radio">
<label for="day4" onclick="">Day</label>
<input id="week5" name="view3" type="radio">
<label for="week5" onclick="">Week</label>
<input id="month6" name="view3" type="radio">
<label for="month6" onclick="">Month</label>
<input id="year7" name="view3" type="radio">
<label for="year7" onclick="">Year</label>
<a class="btn btn-primary"></a>
</div>
</fieldset>
The switches are very flexible, so you can mix and match a number of classes provided by Bootstrap, along with it's grid, to make them look exactly like you need them.