• Vanilla
X

iCheck: Super customized checkboxes and radio buttons.

iCheck works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option.

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some of the disadvantages of similar methods:

  • inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
  • poor browser support
  • multiple bugs on mobile devices
  • tricky, harder to maintain CSS code
  • JavaScript is still needed to fix specific issues
  • While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

 

Features

  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
  • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
  • jQuery and Zepto JavaScript libraries support from single file
  • Screenreader accessible inputs — ARIA attributes for VoiceOver and others
  • Lightweight size — 1 kb gzipped
  • 32 options to customize checkboxes and radio buttons
  • 11 callbacks to handle changes
  • 9 methods to make changes programmatically
  • Saves changes to original inputs, works carefully with any selectors