Checkbix

Simple vanilla Javascript plugin for enhancing checkboxes using CSS.

Accessible, lightweight and easy to use. No dependencies.

Usage

Default

<input id="mycheckbox" type="checkbox" class="checkbix" data-text="Checkbix">

Size

<input id="myothercheckbox" type="checkbox" class="checkbix" data-text="Checkbix. Large, checked" data-size="large" checked>

Shape

Square is default

<input id="mycheckbox3" type="checkbox" class="checkbix" data-text="Circled. Large, checked" data-shape="circled">

Colors

<input id="mycheckbox4" type="checkbox" class="checkbix" data-shape="circled" data-color="black" data-text="Black, circled" checked>

<input id="mycheckbox5" type="checkbox" class="checkbix" data-color="blue" data-text="Blue" checked>

<input id="mycheckbox6" type="checkbox" class="checkbix" data-size="large" data-color="red" data-text="Red, large" checked>

<input id="mycheckbox7" type="checkbox" class="checkbix" data-color="gray" data-text="Gray" checked>

<input id="mycheckbox8" type="checkbox" class="checkbix" data-shape="circled" data-color="orange" data-text="Orange, circled" checked>

Customize ARIA label

<input id="mycheckbox9" type="checkbox" class="checkbix" data-shape="circled" data-color="orange" data-text="Black, circled" data-arialabel="Checkbix is nice" checked>

Install

bower install checkbix.js

npm install checkbix

Include files

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

<script src="dist/js/checkbix.min.js"></script>

Init

<script>
	Checkbix.init();
</script>