Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js

Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is straightforward, these changes are limited to the box and tick itself. For a completely unique look, more extensive coding is needed.

Enter Switchery. This tool simplifies the process of customizing checkboxes, turning them into sleek iOS7-style switches with ease. These switches can be fine-tuned to seamlessly integrate with your design. Let’s dive in.

Starting with Switchery

Switchery is an independent, free JavaScript library. Setting it up is as simple as incorporating Switchery’s JavaScript and CSS files into your project. You can download both from GitHub.

<link rel="stylesheet" type="text/css" href="css/switchery.css" />
<script type="text/javascript" src="js/switchery.js"></script>

To transform your traditional checkbox into a modern switch, just pair your checkbox element with a class recognized by Switchery.

Setting the initial state of the checkbox is straightforward as well. This is achieved by adding the checked attribute in the HTML to ensure it appears as selected upon first load. For instance, to apply a checked state, we simply include a demo class to our checkbox like this:

<input type="checkbox" class="demo" checked />

At this stage, the checkbox has not transformed yet. We must incorporate the following JavaScript code into our HTML. This code specifies the checkbox class and allows for additional options, if necessary.

<script>
var elem = document.querySelector('.demo'); // referred checkbox class is here
var init = new Switchery(elem); // put option after elem attribute
</script>

And there you have it!

Customizing Your Switch

Customizing your switch with various options is straightforward and done within the JavaScript. These options can significantly alter the appearance and behavior of the switch. Here are all the options you can use:

• color: Changes the color of the switch element, accepts HEX or RGB values.
• secondaryColor: Alters the color of the “off” state for the switch’s shadow and border.
• className: Allows for customization of the switch element class name as styled in switchery.css.
• disabled: Enables or disables the switch for click events, accepts a boolean value (true or false).
• disabledOpacity: Adjusts the switch’s opacity when disabled is set to true, with values ranging from 0 to 1.
• speed: Modifies the transition time length, such as ‘0.1s’, ‘0.5s’, or ‘2.2s’.

To apply these options to our switch, for example, changing its primary and secondary colors, simply add the options within curly brackets after the elem attribute in the init variable like this:

<script>
  var elem = document.querySelector('.demo');
  var init = new Switchery(elem, {
    color: '#fec200', 
    secondaryColor: '#41b7f1' 
  });
</script>

Here’s what the customization looks like:

Beyond merely altering the switch’s appearance, a myriad of options exists for functionalities such as displaying multiple switches, linking a switch with other elements, or retrieving its current status. For more details and possibilities, the documentation page is always a helpful resource.

Wrapping Up

Switchery demonstrates how simple it is to incorporate designs from any device into your projects. It is compatible with a wide array of modern web browsers, including Chrome, Firefox, Opera, Safari, and IE8+. For those looking to integrate other iOS 7 style UI elements, Powerange offers an excellent range slider control.

Note: This article was initially published on May 19, 2014.