Skip to content
<open-source>
Oeiuwq Faith Blog OpenSource Porfolio

ghinda/css-toggle-switch

Accessible, CSS-only, toggle switches
Source code at GitHub http://ghinda.net/css-toggle-switch/
ghinda/css-toggle-switch.json
{
  "createdAt": "2011-10-21T13:42:38Z",
  "defaultBranch": "master",
  "description": "Accessible, CSS-only, toggle switches",
  "fullName": "ghinda/css-toggle-switch",
  "homepage": "http://ghinda.net/css-toggle-switch/",
  "language": "Handlebars",
  "name": "css-toggle-switch",
  "pushedAt": "2023-04-25T07:23:02Z",
  "stargazersCount": 661,
  "topics": [],
  "updatedAt": "2025-06-11T17:58:09Z",
  "url": "https://github.com/ghinda/css-toggle-switch"
}

CSS Toggle Switch

Section titled “CSS Toggle Switch”

Build Status Downloads Get help on Codementor

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.

Install

Section titled “Install”

Download from the project page.

With Bower: bower install --save css-toggle-switch

With npm: npm install --save css-toggle-switch

From jsDelivr

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />

How to use it

Section titled “How to use it”

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

Scaling

Section titled “Scaling”

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.

Switches

Section titled “Switches”

Light switch

Section titled “Light switch”

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

Toggle switch

Section titled “Toggle switch”

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

Browser support

Section titled “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.

Development

Section titled “Development”

You’ll need Grunt:

  grunt server

Then

  http://localhost:9000/

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

License

Section titled “License”

CSS Toggle Switch is a project by Ionuț Colceriu, licensed under the [MIT license]!(LICENSE).