ApToggleSwitch is a component that turns a checkbox into a more efficient component, especially on touch devices. It is inspired by HTC Sense interface, written as simple jQuery plugin and completely based on CSS3 that it ready for any resolutions (»Retina-ready«).

  1. Examples
  2. License and Download
  3. How to use
  4. Options
  5. API
  6. Themes
  7. Changelog
  8. FAQ



    transitions: false

    activeBorder: true,
    uppercase: false,
    theme: 'dark'
    activeBorder: true,
    uppercase: false,
    theme: 'dark-alternative'
For adding event listener see here!

License and Download

ApToggleSwitch is licensed under MIT license.

The latest source code is available on GitHub.

Direct Download

How to use

Include jQuery (e.g. from Google CDN), JS and CSS:

<!-- Add jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

<!-- Add ApToggleSwitch -->
<link rel="stylesheet" type="text/css" href="css/ap-toggle-switch.css" media="screen" />
<script src="js/ap-toggle-switch.0.1.min.js"></script>

Or you use the minified versions which saves bandwidth – ~20KB vs. 13KB:

<!-- Add ApToggleSwitch -->
<link rel="stylesheet" type="text/css" href="css/ap-toggle-switch.min.css" media="screen" />
<script src="js/ap-toggle-switch.0.1.min.js"></script>

Next step ist to insert a new checkbox or to detect that one you want to transform to ApToggleSwitch.

<input type="checkbox" name="cb1" id="cb1" tabindex="1" />

Apply ApToggleSwitch when document is loaded... and TADA! That's all!

<script type="text/javascript">
    $(document).ready(function() {


If the checkbox has a tabindex this attribute is automatically applied to the ApToggleSwitch control and is removed from checkbox.

If you need access to the ApToggleSwitch control you can access it via ID the following way: adding an ID to the checkbox will generate an prefixed ID ap-toggle-switch-ID for the control – replace ID with your ID.


Name Description
handleLabelClicks If true, this script handles clicks on corresponding <label>-elements. Default: true
handleKeyEvents If true, this script handles key events if UI element is focused. Following keys are handled:
  • Space, Enter: toggle value
  • Right, Y: set value On
  • Left, N: set value Off
Default: true
transitions If true, transitions are enabled when toggling value. The transitions are CSS based, so browser has to support CSS transitions! Default: true
activeBorder If true, a highlight border is shown when element is focused. Default: false
uppercase If true, the font in the UI element is uppercase. Default: true
theme Used theme for UI element. Available themes:
  • default
  • dark
  • dark-alternative
Default: 'default'


Name Description
Toggles the control value.
on / yes
// or

Set's the control value to true. If value was already true, nothing happens and no change event is triggered.

off / no
// or

Set's the control value to false. If value was already false, nothing happens and no change event is triggered.


There are three basic themes right now: default, dark and dark-alternative. But you can easily add you own theme or overwrite the exitant ones. Therefore have a look at ap-toggle-switch.css where you can find the three example themes.

To add your own theme you have to add the following CSS skeleton to your stylesheet and replace NAME with any name. Now you can apply any colors you want to! After you have finished you can apply your theme by setting theme: 'NAME'.

.ap-toggle-switch-NAME {
    /* UI container */

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-left {
        /* Left part of toggle switch, visible when ON */

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-middle:after {
    	/* Middle part of toggle switch, always visible */

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-right {
        /* Left part of toggle switch, visible when OFF */

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider .on {
        /* text "On" */

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider .off {
        /* text "Off" */

.ap-toggle-switch-NAME.active-border:active {
    /* UI container with status focused */

Modifying a theme means to copy the skeleton, set NAME to the corresponding theme name and add the values you wish. Please ensure that the modified CSS is loaded after the default themes!



Initial version


Can I use a event listener?

Yes, of course you can add an event listener. But you have to add it to the checkbox! An example:

<input type="checkbox" name="cbX id="cbX" />
<script type="text/javascript">
    $(document).ready(function() {
            .change(function() {
                alert('#cbX changed to ' + $(this).is(':checked'));

Transistions does not work

Do you use a modern browser that supports CSS transitions? The transitions are not based on JavaScript or jQuery, they are are based on CSS.

The text On/Off does not fit/is too big?

The problem is that the font PT Sans Narrow is not loaded! In ap-toggle-switch.css you can see that the font is imported from Google Fonts so if you computer has no internet access it can not load this font.

For this problem you can add ap-toggle-switch.offline.css and the fonts folder. Please ensure that paths in ap-toggle-switch.offline.css point to the correct fonts, if you use another structure.

Why does the UI element not look as it should?

This component was written for modern browsers that support CSS3 and not old ones like IE6-IE8. There is even no browser detection that disables the script on not supported browser. You have to do that on your own if you like to have such a feature!

Is it possible to modify a theme?

Of course! Have a look at Themes. There you find all necessary information for adding an individual theme or modifying an existant one.

If you have any feedback, or have a feature request, let me know: mail@armin-pfaeffle.de | Impressum