css-toggle-switch
Advanced tools
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.
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/css-toggle-switch/latest/toggle-switch.css" />
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.
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.
The onclick="" attribute is required for older iOS and Opera Mini support.
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.
CSS Toggle Switch is a project by Ionuț Colceriu, licensed under the MIT license.
FAQs
Accessible CSS toggle switch using standard form controls
We found that css-toggle-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.