1. Home
  2. Foundation switch

Foundation switch

Switch is a mouse click (finger tapping) under switch between "On" and "Off" states:

Switch to use <div class="switch"> Create. <div> added with a unique id within the <input type="checkbox"> , <label> element for attributes need <input type="checkbox"> id of matches:

Examples

<Div class = "switch">
<Input id = "mySwitch" type = "checkbox">
<Label for = "mySwitch"> </ label>
</ Div>

Switch size

Use .large , .small or .tiny class to set the switch size:

Examples

<Div class = "switch large" > /en. </ div>
<Div class = "switch"> /en. </ div>
<Div class = "switch small" > /en. </ div>
<Div class = "switch tiny" > /en. </ div>

Fillet switch

Use .radius and .round class to set the fillet switch:

Examples

<Div class = "switch"> /en. </ div>
<Div class = "switch radius" > /en. </ div>
<Div class = "switch round" > /en. </ div>

Switch group

You can set individual options by setting the radio button (radio). Note: Note that each option name attribute must be the same (for instance "myGroup").

Examples

<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>

Hot Tutorials

Contact US