Toggle switch has become one of the popular form elements in mobile apps, sometimes, on desktop website. It makes perfect sense while we use it on touch screen devices because it works exactly like those switches in our living space.
There is no toggle switch element in HTML, the closer that we could find is checkboxes. Therefore, the implementation of switches usually requires additional HTML markup and CSS to create the switch interface and Javascript for the interactivity. It creates an UI on top of checkboxes, without compromising the existing form behaviour.
Here we have 2 Javascript and a CSS3 solutions. Also, if you think these aren't enough, we found a list of custom made and well-styled switches from codepen and cssdeck.
- Checkbox
- On/Off FlipSwitch, CSS3 powered On/Off flip switch.
- iOS Checkboxes
- Toggle Switch by jamiebicknell
- Toggle Switch by marchaos
Free & Working Examples
We have found a collection of free and working examples of toggle switches from codepen and cssdeck. Most of them are made purely with CSS3 and ready to be used.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.