iCheck – Beautifully Customized Checkboxes and Radio Buttons

iCheck is a fresh and neat plugin for jQuery and Zepto with different skins (currently 6) for radio buttons and checkboxes. It is created to ease the workflow whenever a checkbox or a radio button is needed. It also provides an identical result in most browsers, devices and their versions.
Callbacks and methods can be used to make and handle changes in any customized inputs.

Why you need such a plugin? It can be done with CSS3. Yes, and no. There are many disadvantages when you use CSS3 to style checkboxes and radio buttons. To name a few: bugs on mobile devices, poor browser support, hard to maintain CSS code and still you need a bit of JavaScript to fix specific problems.

iCheck is created to speed up work process and make life of designers and developers a bit easier. At least when it comes to checkboxes and radio buttons. Making sure you have beautiful looking website in all browsers and on all devices can be quite a time-consuming job. iCheck helps with that.

Here are the skins:

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

All skins have a detailed usage explanation. You can see them here.

Here is how to use it:
iCheck works like a constructor. It wraps up each input in a div, which can be customized by using any of the skins available or by you. Some HTML code or text can be places in the very same div by using the insert option.

Example HTML:

<label>
<input type="checkbox" name="quux[1]" disabled>
Foo
</label>
<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>
<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

With default options you’ll get this:

<label>
<div class="icheckbox disabled">
<input type="checkbox" name="quux[1]" disabled>
</div>
Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio checked">
<input type="radio" name="quux[2]" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio">
<input type="radio" name="quux[2]" id="baz[2]">
</div>

By default, iCheck doesn’t provide any CSS styles for wrapper divs (if you don’t use skins).

Demo Download

For details regarding options and skins, feel free to visit iCheck plugin website.