Switchs

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7.

GitHub Switchery

Usage and settings

Only thing you need is to add a checked attribute to your checkbox input.

<input type="checkbox" class="js-switch" checked />

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

defaults = {
    color             : '#64bd63',
    secondaryColor    : '#dfdfdf',
    jackColor         : '#fff',
    jackSecondaryColor: null,
    className         : 'switchery',
    disabled          : false,
    disabledOpacity   : 0.5,
    speed             : '0.4s',
    size              : 'default'
};
  • color : color of the switch element (HEX or RGB value)
  • secondaryColor : secondary color for background color and border, when the switch is off
  • jackColor : default color of the jack/handle element
  • jackSecondaryColor : color of unchecked jack/handle element
  • className : class name for the switch element (by default styled in switchery.css)
  • disabled : enable or disable click events and changing the state of the switch (boolean value)
  • disabledOpacity : opacity of the switch when it’s disabled (0 to 1)
  • speed : length of time that the transition will take, ex. ‘0.4s’, ‘1s’, ‘2.2s’
  • size : size of the switch element (small or large)

Multiple switches

You can add as many switches as you like, as long as their corresponding checkboxes have the same class.

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

Disabled

Use the disabled option to make your switch active or inactive.

var switchery = new Switchery(elem, { disabled: true });

Colored

You can change the primary(on) and secondary(off) color. Changing the color and secondaryColor options. The jack colors are also customizable via the jackColor and the jackSecondaryColor options.

See the sass colors variables.

var elemSwitchSuccess = document.querySelector('.switch-success');

new Switchery(elemSwitchSuccess, { 
    color: '#c7eb9b',
    secondaryColor: '#ebA09b',
    jackColor: '#98bf49',
    jackSecondaryColor: '#f2594e'
});

Sizes

Giving it a value of small or large will result in adding switchery-small or switchery-large classes respectively, which will change the switch size. Not using this property will render the default sized switch element.

var switchery = new Switchery(elem, { size: 'small' });