Top 15: Best jQuery, JavaScript, CSS Checkbox and Radio button replacement plugins

Visually stunning interfaces will be always necessary nowadays, a boring application won't be probably the favorite of the users, right? As a designer or web dev is your responsability to create user interfaces that are easy to use but that look good as well. Default checkboxes and radio buttons aren't usually the best choice for an application whose components have other styles (custom buttons etc), so you can't forget neither to give a cool style to those components too.

In this article, we want to share with you 15 of the most imponent CSS and JavaScript based plugins to create awesome and beautiful checkboxes in your web application in a couple of seconds, enjoy them !

TinyToggle is a simple and useful plug-in to mask the checkboxes html inputs tag in your projects. You can choose from 13 different icons sets available, you can also customize colors palette and size as you like and extend with external library like Font Awesome. TinyToggle is based on web fonts css it's easy to use and light to include in your project.

iCheck-bootstrap is a pure css solution for displaying twitter bootstrap style checkboxes and radio buttons. icheck-bootstrap is based on twitter bootstrap styles, so make sure you link the bootstrap stylesheet properly in your header and use the default markup structure:

Bootstrap Checkbox is a very straightforward and easy to use checkbox component based on the Bootstrap framework. To get started with this plugin simply include a copy of the bootstrap-checkbox.js script in your document:

Labelautiy is a very nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un) checked inputs. To initialize a checkbox with default labels "Checked" and "Unchecked", one for each input state, you can simply use the following code:

Ti-Ta-Toggle Using awesome toggle buttons without Javascript or any other logic, other than plane form elements. The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze. It provides support for the following browsers: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android. The Version 1.0.0 of TitaToggle has support for Bootstrap v3.x.x

Toggles is a lightweight jQuery plugin that creates easily-styleable toggle buttons. You need to specify the class for the specific theme you want to use. In this case we are using toggle-modern. The toggle class is simply what we will use as our selector to initialize it:

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles. To get started, include the plugin in your project and simply add the data-toggle="toggle" attribute to convert checkboxes into toggles.

iCheck is a highly plugin to create customizable checkboxes and radio buttons for jQuery and Zepto. The v2.0 is on the way as well and it got a huge performance boost, many new options and methods. It's in a release candidate state, so you may try to use it. This plugin offers:

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Licensed under the MIT License. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+.

If you know another open source component to replace those ugly default checkboxes of the browser, please share it with the community in the comment box.