Switchery - iOS 7 style switches for your checkboxes

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+

Adding disabled or readonly attribute to the native input element will result in the switch being disabled as well.

Colored

You can change the primary color of the switch to fit your design perfectly:

var switchery = new Switchery(elem, { color: '#41b7f1' });

Or the secondary color, which will change the switch background color and border color:

var switchery = new Switchery(elem, { secondaryColor: '#bbf0f0' });

Since version 0.6.3, you're even allowed to change the jack color from JS, as follows:

var switchery = new Switchery(elem, { jackColor: '#fffc00' });

Any other changes regarding colors you want to make, should take place in switchery.css.

Sizes

Since version 0.7.0 you can change the sizes of the switch element via size. Giving it a value ofsmall or large will result in adding switchery-small or switchery-large classes respectively, which will change the switch size.