Animated Checkbox Input Enhancement In Vanilla JavaScript – Checkbix

Category: Form , Javascript | July 22, 2016
Author:urre
Views Total:742 views
Official Page:Go to website
Last Update:July 22, 2016
License:MIT

Preview:

Animated Checkbox Input Enhancement In Vanilla JavaScript – Checkbix

Description:

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">

You Might Be Interested In:


Leave a Reply