Animated Checkbox Input Enhancement In Vanilla JavaScript – Checkbix

Checkbix is a small vanilla JavaScript library used to create customizable, animated, nice-looing checkbox inputs for your html form.

How to use it:

Put the Checkbix’s JavaScript and Stylesheet in your html page.

<link rel="stylesheet" href="dist/css/checkbix.min.css">
<script src="dist/js/checkbix.min.js"></script>

Initialize the Checkbix and we’re ready to go.

Checkbix.init();

Add the CSS class ‘checkbix’ to the default checkbox inputs and pass the Checkbix’s customization options via HTML5 data attributes as follows:

• data-text=”Checkbix”: custom label text
• data-size=”large”: size of the checkbox
• data-shape=”circled”: circular checkbox
• data-color=”black”: checkbox color
• data-arialabel=”Checkbix”: aria lable text

<input id="mycheckbox" type="checkbox" class="checkbix" 
       data-text="Checkbix"
       data-size="large"
       data-shape="circled"
       data-color="black"
       data-arialabel="Checkbix">