Examine this screenshot of native iOS 7 switch controls on an iPhone 5:
Are you curious about replicating these switch controls in your HTML web forms? Look no further, as a new open-source project called Switchery has just been introduced.
Switchery is available on GitHub under the MIT open-source license and was created by Alexander Petkov, a Bulgarian web designer and front-end developer.Implementing Switchery is a breeze, with multiple approaches available. I will demonstrate one method for you.Here’s what we aim to achieve:
Download the latest version of Switchery from the project’s GitHub page.On the GitHub webpage, simply click the “Download ZIP” button in the sidebar:
Extract the ZIP file and move the standalone folder to your working directory.Below, you can observe that I’ve created a file named demo.html and custom.css for my custom CSS. Our markup will be placed within the demo.html file.
Within the element, reference the two Switchery files as follows:<head><link rel=”stylesheet” href=”https://www.webfx.com/blog/web-design/ios-7-switches-switchery/standalone/switchery.css”><script src=”https://www.webfx.com/blog/web-design/ios-7-switches-switchery/standalone/switchery.js”></script><head>This step can be executed in a separate JavaScript file, which is a recommended practice for modularity.For the purpose of this tutorial, however, I’ve placed my code within a <script> tag just before the closing </body> tag. Why at the end?Placing inline scripts at the end of an HTML document enhances page load speed.<script type=”text/javascript”> var Switchery = require(‘switchery’); var elems = Array.prototype.slice.call(document.querySelectorAll(‘.switchery’)); elems.forEach(function(html) { var switchery = new Switchery(html); }); </script></body>The code above enables the creation of multiple switches by simply assigning a class of . to our checkbox elements.Switchery transforms your standard HTML checkbox input elements into switches. In this example, the checkbox must have a class of to function as a switch control.I’ve crafted a basic web form with two checkboxes and a submit button. Here’s the markup for my <form> element:<form><p><label for=”setting1″>Enable automatic billing</label><input type=”checkbox” class=”switchery” name=”setting1″ /></p><p><label for=”setting2″>Disable email alerts</label><input type=”checkbox” class=”switchery” checked name=”setting2″ /></p><input type=”button” value=”Update Settings” /></form>Here’s what the form would look like without Switchery:
With Switchery, the form transforms into this:
After applying some CSS style rules to enhance aesthetics and incorporating additional iOS 7 style switch controls, here’s the final outcome:For a detailed look at how I crafted the web form to resemble the image above, download the source files for this tutorial, including the demo.html and custom.css files.Customize the color and animation speed of the switch controls as desired. Visit the official Switchery website for guidance.
