In this tutorial, I’ll show you a way of adding iO7-inspired switches to ordinary web forms.

Here’s a screenshot of native iOS 7 switch controls on iPhone 5:

Native iOS 7 switches on iPhone 5

So how do we get switch controls like the ones in native iOS 7 apps in our HTML web forms?

Lucky for us a new open source project called Switchery was just released.

Switchery

Switchery is on GitHub under the MIT open source license. The creator of Switchery is Alexander Petkov, a web designer and front-end web developer from Bulgaria.

Adding iOS 7 Switch Controls to Your Forms

Implementation of Switchery is super easy. There are several ways to do it. I’ll show you one way.

This is what we’ll make:

iOS 7 Switch Controls

View Demo

Install Switchery

You can download the most recent version of Switchery at the project’s GitHub page.

When you’re on the GitHub web page, just click on the "Download ZIP" button in the sidebar:

Download

Open the ZIP file and move the standalone folder to your working directory.

Below, you can see in our working directory that I also created a file called demo.html and custom.css for my own custom CSS. We will put our markup inside demo.html.

Reference the Switchery Files in the HTML Document

Inside the <head> element, reference the two Switchery files like so:

<head>
	<link rel="stylesheet" href="standalone/switchery.css">
	<script src="standalone/switchery.js"></script>
<head>

Initialize Switchery

You can do this step in a separate JavaScript file, which is a good practice for modularity.

However, for this tutorial, I just placed my code inside a <script> tag right before the closing </body> tag. Why did I put it at the end? Placing inline scripts at the end of HTML document improves 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 allows us to create multiple switches simply by giving our checkbox elements a class of switchery.

Create the Form’s HTML

Switchery converts your ordinary HTML checkbox input elements into switches. In this example, the checkbox must have a class of switchery for it to become a switch control.

I just created a simple web form with two checkboxes and a submit button. This is the markup of 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="setting1" />
	</p>
	
	<input type="button" value="Update Settings" />

</form>

This is what the form would look like without Switchery:

Switchery disabled

With Switchery, this is how it looks:

With Switchery

Add Some CSS to Make Things Look Prettier

After writing some CSS style rules just to make things look prettier and adding a couple more iOS 7 style switch controls, here’s the final result:

If you’d like to see how I made my web form look like the image above, you can review the demo.html and custom.css files by downloading the source of this tutorial.

Further Customizations

You can also change the color and the animation speed of the switch controls. Go to the official Switchery website to learn how.

Download Source

Author:

Jacob Gube is the co-founder and a managing editor of Design Instruct. He's a web developer, and also the owner of Six Revisions. Follow Jacob on Twitter: @sixrevisions