❮ Foundation Equalizer Foundation Dropdowns ❯

Foundation Switch

The switch toggles between "On" and "Off" states upon mouse click (or finger tap):

To create a toggle switch, use <div class="switch">. Inside the <div>, add an <input type="checkbox"> with a unique id, and the <label> element's for attribute should match the <input type="checkbox">'s id:

Example

<div class="switch">  <input id="mySwitch" type="checkbox">  
    <label for="mySwitch"></label></div>

Switch Sizes

Use the .large, .small, or .tiny classes 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>

Rounded Toggle Switch

Use the .radius and .round classes to set rounded toggle switches:

Example

<div class="switch">...</div> &lt;div class="switch 
    radius">...</div> <div 
    class="switch round">...</div>

Switch Group

You can set individual options by using radio buttons. Note: The name attribute of each option must be the same (in this example, "myGroup").

Example

<div class="switch">  <input id="mySwitch1" type="radio" name="myGroup">  
    <label for="mySwitch1"></label></div> <div class="switch">  
    &lt;input id="mySwitch2" type="radio" name="myGroup" 
    checked>  <label 
    for="mySwitch2"></label></div>

❮ Foundation Equalizer Foundation Dropdowns ❯