Foundation switch

May 04, 2021 Foundation5

Foundation switch

The switch is switched in the "On" and "Off" states with a mouse click (finger tap):

The switch is <div class="switch"> <div> of the element needs to match the id of the <label> <input type="checkbox"> with a unique id added <input type="checkbox"> to the .

Instance

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

Try it out . . .

Switch size

Use .large .small .tiny classes to set the switch size:

Instance

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

Try it out . . .

Fillet switch

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

Instance

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

Try it out . . .

Switch group

You can set individual options by setting radio buttons. Note: Note that the name of each option must be consistent (in the instance, "myGroup").

Instance

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

Try it out . . .

Foundation switch

Table of contents