iOS 7 style switch directive for AngularJS

Downloads in past


277390.1.19 years ago10 years agoMinified + gzip package size for angular-ui-switch in KB


This is a simple iOS 7 style switch directive for AngularJS. You can use this module as you would use the default HTML checkbox input element. This is a super lightweight module and you can completely change the design using just CSS.
Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+
Inspired by switchery - in angular way.


Download the package from github. The package is also available over npm install angular-ui-switch or bower install angular-ui-switch.
Include javascript and css files into your page.
<!DOCTYPE html>
<html lang="en" ng-app="app">
  <link rel="stylesheet" href="/ui-switch.min.css"/>
  <script src="//"></script>
  <script src="/ui-switch.min.js"></script>

Declare a dependency on the module.
angular.module('myModule', ['uiSwitch']);

Insert the switch in your html template.
  <switch id="enabled" name="enabled" ng-model="enabled" class="green"></switch>
  <br>{{ enabled }}

Add optional on/off text
  <switch id="enabled" name="enabled" ng-model="enabled" on="On" off="Off" class="green"></switch>
  <br>{{ enabled }}

Disabled state
  <switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="green"></switch>
  <br>{{ enabled }}


You can completely change the design. All the magic is hidden inside two CSS classes.
.switch {
  /* frame */
.switch small {
  /* button */
.switch.checked {
  /* frame when enabled */
.switch.checked small {
  /* button when enabled */


  1. Update version in package.json and bower.json.

  1. Run make compile to minify files.

  1. Run make publish to publish.