CSS Toggle Switch
CSS Toggle Switches are a set of accessible CSS-only switch components, created from standard form controls in the markup.
Download from the project page.
bower install --save css-toggle-switch
npm install --save css-toggle-switch
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
How to use it
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
If you want to switches to scale using
rems, you can include the
toggle-switch-rem.css file (without including
If you don't need the switches to scale at all, you can use the the
Use the light switch, instead of a checkbox, for simple On/Off options.
Use the toggle switches, instead of radio buttons, for two or more, specific options.
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.
onclick="" attribute is required for older iOS and Opera Mini support.
You'll need Grunt:
Don't use the
gh-pages branch. It's used only for hosting the documentation website.