Foundation Switch
The switch toggles between the "On" and "Off" states on a mouse click (finger tap):
Toggle Switch Usage<div class="switch">Create.<div>Inside, add ... with a unique id<input type="checkbox"> ，
<label>The element's for attribute needs to match<input type="checkbox">the id of ...:
Example
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
Try it Yourself »
switch size
Usage.large, .smallor.tinyclass to set the switch size:
Example
<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
Try it Yourself »
Rounded Toggle Switch
Usage.radiusand.roundUse the class to set the rounded toggle switch:
Example
<div class="switch">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
Try it Yourself »
switch group
You can set a single option by setting a radio button.Note:Note the options for eachnameThe attributes must be consistent (in the example, it is "myGroup").
Example
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
Try it Yourself »