An AngularJS Directive for Switchery
Clone or download
Latest commit 68bb50f Jul 13, 2017
Failed to load latest commit information.
examples Fixed the examples & added documentation Sep 26, 2014
src format code Jul 5, 2017
LICENSE Added usage & example to readme Jan 4, 2014 Finally fixed disabled attr. Have to use ng-disabled to make it work Nov 9, 2015
bower.json Updated switchery dependency to ~0.8.1 + more stable implementation o… Nov 9, 2015


An AngularJS Directive for Switchery.


  1. Include switchery/dist/switchery[.min].css from your vendors/components folder in your links.
  2. Include switchery/dist/switchery[.min].js from your vendors/components folder in your scripts.
  3. Include ng-switchery.js in your scripts
  4. Declare a dependency on the NgSwitchery module
  5. Add the ui-switch attribute to a checkbox.


Declare a dependency on the module

angular.module('myModule', ['NgSwitchery']);

Insert checkbox html

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

Setting Options

<input type="checkbox" class="js-switch" ui-switch="{color: '#E43B11', secondaryColor: '#F89279'}" />

Disable switch

<input type="checkbox" class="js-switch" ui-switch ng-disabled="isDisabled" />

Bower install

bower install ng-switchery

##Alternative## You may also wish to look at how to achieve this with pure CSS.

##Notice on Version## This project is still in its very early stages and should not be considered production ready.

At this time we are no longer using this project, but will continue to maintain it until someone else agrees to take over. This means that updates will be slow as this is not a priority for us. New releases will be made as our team has time to volunteer to the project.