Checkbox.js aims to create a functional checkbox out of pretty much any HTML markup. This allows you to style the checkbox any way you would like. It gives you full control of the markup.

Getting started

Given our HTML:

<label for="checkbox">Subscribe?</label>
<span id="checkbox"></span>

We can create a new checkbox out of a span by passing the element to checkbox.js:

new Checkbox(document.getElementById('checkbox'));

This will create a checkbox out of that HTMLElement that you passed. Checkbox.js will try to find a label element in the DOM to associate with the checkbox. If it can't find a label it will throw an error. All checkboxes must have a label.

What your checkbox should look like after using checkbox.js:

<label for="checkbox" id="jsze4iuu8c">Subscribe?</label>
<span id="checkbox" tabindex="0" role="checkbox"
  aria-labelledby="jsze4iuu8c" aria-checked="false"></span>

Now you can style the checkbox to look how ever you want!