Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Accessible, CSS-only, toggle switches
CSS HTML JavaScript
Latest commit fd2eee7 @ghinda Merge branch 'fx'
* fx:
  Fix the text jumping to the left on `switch-toggle` bug, happening on Firefox when selecting an item. Fix the ripple animation on Firefox, on the Material Design theme, by using `visibility` instead of `opacity` for the "show only on focus" trick.

CSS Toggle Switch

Build Status

CSS Toggle Switches are a set of accessible CSS-only switch components, created from standard form controls in the markup.

You can use them standalone, or with Bootstrap or Foundation.


Download from the project page.

Install with Bower: bower install --save css-toggle-switch

Install with npm: npm install --save css-toggle-switch

How to use it

Just include toggle-switch.css, and use the markup from the documentation.


By default, the switches will scale along with the font size on their parent, because they're built using ems.

If you want to switches to scale using rems, you can include the toggle-switch-rem.css file (without including toggle-switch.css).

If you don't need the switches to scale at all, you can use the the toggle-switch-px.css file.


Light switch

Use the light switch, instead of a checkbox, for simple On/Off options.

Toggle switch

Use the toggle switches, instead of radio buttons, for two or more, specific options.

Browser support

The toggle switches work on all modern browsers, including mobile ones(even proxy-browsers like Opera Mini).

Browsers without support for media-queries, such as IE8 and bellow, get standard form elements.

The onclick="" attribute is required for older iOS and Opera Mini support.


You'll need Grunt:

  grunt server



Don't use the gh-pages branch. It's used only for hosting the documentation website.


CSS Toggle Switch is a project by Ionuț Colceriu, licensed under the MIT license.

Something went wrong with that request. Please try again.