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
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 Create Aug 28, 2017 Create Aug 28, 2017
LICENSE Initial commit Aug 25, 2017 Update 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

Click Here for Demo

Tons of Checkboxes

A huge collection of pure css checkboxes.

Click Here for Demo


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>

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


  • 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.