Checked

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

            

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

Result:

Multiple switches

You can add as many switches as you like, as long as their corresponding checkboxes have the same class. Select them and make new instance of the Switchery class for every of them.

            

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

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

Result:

Disabled

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

            

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

Result:

Customize the default opacity of the disabled switch like so:

            

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

Result:

Colored

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

            

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

Result:

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

            

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

Result:

Legacy browsers

If you are an adventurer and like to use legacy browsers, like IE8 and IE7, apply your favourite fix for rounded corners and box shadows and try a slightly different approach.

            

              
var elems = document.querySelectorAll('.js-switch');
              

              
for (var i = 0; i < elems.length; i++) {
                
  var switchery = new Switchery(elems[i]);
              
}