Skip to content
A huge library of CSS Checkboxes for every taste.
HTML JavaScript
Branch: master
Clone or download
Latest commit 4e1143d Sep 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Aug 28, 2019
demoDist demo page changes Nov 15, 2017
dist/css Stopped it from interfering with other checkboxes Aug 3, 2018
.gitignore new changes Sep 12, 2017
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Aug 28, 2017
CONTRIBUTING.md Create CONTRIBUTING.md Aug 28, 2017
LICENSE Initial commit Aug 25, 2017
README.md Update README.md Sep 6, 2019
index.html Update index.html Aug 27, 2019
package.json updated version Sep 20, 2017
screen.png [ImgBot] optimizes images Sep 2, 2017

README.md

Click Here for Demo

Tons of Checkboxes

A huge collection of pure css checkboxes.

Click Here for Demo

Compatible

IE9+, Chrome 49+, Firefox 52+, Safari 5+

How to use

  1. Install via NPM npm i css-checkbox-library or Download the Zip
  2. Import the checkboxes.min.css or checkboxes.css file from the dist folder.
  3. Use the checkbox design you like with the following markup. In the example below the class ckbx-square-1 is important.
<div class="ckbx-square-1">
  <input type="checkbox" checked id="ckbx-square-1-2" value="0" name="ckbx-square-1">
  <label for="ckbx-square-1-2"></label>
</div>

That's it.

You can checkout the DEMO to get HTML Code for each design. Just press the HTML button.

Buy Me a Coffee at ko-fi.com

Todo

  • Circles, Squares
  • Toggles
  • HTML Code Snippet
  • Added Different Sizes
  • Color Variations
  • More Animations
  • Just for Fun Toggles
You can’t perform that action at this time.