icheck

iCheck is a jQuery and Zepto plugin that replaces the default look of checkboxes and radio buttons in web pages with fully customizable styled versions. The standard browser-provided checkboxes and radio buttons look different across browsers and are difficult to style with CSS alone. iCheck solves this by wrapping each input in a div element that can be given any appearance you want.

The plugin works with both desktop browsers and mobile devices, including iOS, Android, BlackBerry, Windows Phone, and Amazon Kindle. It preserves accessibility by supporting keyboard navigation and screen readers through ARIA attributes. The file size is small, around 1 kilobyte when compressed.

To use iCheck, you call it on any jQuery selector that contains checkboxes or radio buttons. The plugin finds the inputs and wraps each one, then applies CSS class names to reflect the current state: checked, unchecked, disabled, enabled, hovered, focused, active, or indeterminate. You control the visual appearance by styling those class names yourself, or by using one of six pre-made Retina-ready skins that ship with the plugin.

There are 32 configuration options covering things like which class names to apply for each state, whether to increase the clickable area of small inputs, how to handle label interactions, and whether to enable ARIA accessibility support. The plugin also fires 11 callbacks so your code can react when an input is clicked, checked, unchecked, disabled, enabled, or toggled. Nine programmatic methods let you check, uncheck, disable, enable, or destroy inputs without user interaction.

The plugin supports the indeterminate state that HTML5 allows for checkboxes, where the box appears neither fully checked nor unchecked, a visual that is sometimes used in tree-selection UIs. Changes made through iCheck are kept in sync with the original underlying input elements, so form submission and other standard browser behavior works as expected.