Accessible CSS toggle switch using standard form controls
Use the toggle switches, instead of radio buttons, for two or more, specific options.
Use the official switch, provided by Foundation, for for simple “On/Off” options. The official Switch component was initially based on css-toggle-switch.
<div class="switch">
<input class="switch-input" id="switch" type="checkbox" name="switch">
<label class="switch-paddle" for="switch">
<span class="show-for-sr">View</span>
</label>
</div>
Use the toggle switches, instead of radio buttons, for two or more specific options.
<label>View</label>
<div class="switch-toggle callout large-5">
<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="button"></a>
</div>
Add up to 6 options. No extra work needed.
<fieldset>
<legend>View</legend>
<div class="switch-toggle callout">
<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="button"></a>
</div>
</fieldset>
The switches are very flexible, so you can mix and match a number of classes provided by Foundation, along with it's grid, to make them look exactly like you need them.