Mobile Switch

This is a really simple and lightweight library that transforms checkboxes on mobiles to behave like the native mobile switches.

A minimal amount of js is used to make the switch draggable – the rest is pure css. So much that the basic behaviour even works without js. The default design is clearly heavily inspire by the iOS 7 switch but the well documentated style can easily be change to fit your design.

To keep it as lightweight as possible it currently only supports iOS and Android. So when you go check out the demo do it on your phone or use the touch emulator in chrome (remember to reload the page after having enabled it).

Preview

Check out the real thing.

Usage

Add the required javascript and css to your website:

<link rel="stylesheet" href="switch.css">
<script src="switch.js"></script>

For the switch to work two requirements have to met:

The label has to be places right after the input.
The for attribute on the label should match the id on the input.

<input type="checkbox" id="cb" />
<label for="cb"></label>

To enable the switch run:

var switch = new Switch(document.getElementById('cb'));

You can enable the plain css fallback for devices that are not support by adding the switch class (in this example it's enabled for Windows Phone):

if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.getElementById('cb').className = 'switch';
}

Browser support

As mentioned only iOS and Android are supported. This is because support for mouse events would make the js way more complex since the mouse event on the switch is not triggered when dragged outside the element.

If support for other then iOS and Android is needed a plain css solution is possible with this library (by adding the class switch to the input–see index.html for further detail).

Windows Phone

Support for Windows Phone could easily be added (just follow this guide if you need it).

Touch test

Testing for touch support can be a bit tricky as explained in this article and the modernizr touch test but a simple test for ontouchstart will work for iOS and Android and will only falsely return true on very rare setups.

Browser requirements

Right now the lib has the following requirements:

getBoundingClientRect is the one setting the limit here but even this is supported by most Android and iOS versions.

###Development It uses stylus as it's css preprocessor (extended by nib to handle browser specific prefixes). To install these to libraries run:

npm install stylus -g
npm install nib -g

With the following command the stylus files can now automatically be compiled on change:

make styles

If you would like to add support for another switch color you could add the following to stylus style:

input[type="checkbox"].switch.black
input[type="radio"].switch.black
  + label
    .js-switch-background
    &:before
      background-color #000
  &:checked + label
      .js-switch-background
      &:before
        box-shadow 0 0 0 1px #000
  &:checked + label
  + label
      &.js-switch-active
        .js-switch-background
          box-shadow 0 0 0 1px #000

The minified js is compiled with Minify:

npm install minify -g

To compile:

make js