10 Best Custom Checkbox And Radio Input Replacements (2019 Update)

Krify Software Technology
22nd Jul 2019
  • Share Icon
  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • Reddit Icon
  • WhatsApp Icon
Share on

Tired of ugly native checkboxes and radio buttons in the form? Default checkboxes and radio buttons are not usually the best choice for an application whose components have other styles. So, never forget to give styles to those components too. Visually charming interfaces will be always essential nowadays, a boring application won’t be apparently the favorite of the users, right? As a designer, you should be responsible to create user interfaces that are easy to use but also that look good as well.  Here is the collection of 10 best free jQuery and pure CSS libraries to enhance, and beautify the native checkboxes and radio buttons in your HTML forms. 

Here are the top 5 best Checkbox and Radio inputs with pure CSS and JQuery libraries to create impressive and beautiful checkboxes in your web application

Top 5 best Checkbox and Radio Inputs 

  • Material and iOS Style Checkbox and Radio inputs: A lightweight and pure CSS solution to create Material Design and iOS inspired animated checkboxes and radio buttons for your HTML form which can be customized using CSS.
check boxes and radio buttons
  • Bootstrap Checkbox: Bootstrap Checkbox is a jQuery/ Bootstrap plugin that converts a normal checkbox into an awesome toggle control. It is a very straightforward and easy to use checkbox component based on the bootstrap framework. To create this just simply include the bootstrap-checkbox.js script in your document:

<!-- Include jQuery -->

<script src="jquery.js"></script>

<!-- Include Copy of bootstrap-checkbox.js -->

<script src="dist/js/bootstrap-checkbox.js"></script>

To select the checkbox elements with jQuery then initialize the component and call the checkboxpicker method:


Bootstrap checkbox

  • Tiny Toggle: Tiny toggle is a simple and useful plugin to mask the checkboxes HTML input tag in your projects. It contains a jQuery plugin and a web font that allows you to convert checkboxes into fabulous on/off toggle buttons/switches using HTML5 data attributes. In this, you can choose from 13 different icons sets and customize colors palette and size as you like and extend with an external library. It is easy to use and light to include in your project.
Tiny Toggle

  • iCheck: iCheck is a fancy and lightweight jQuery plugin and pure CSS solution that allows you to create beautiful and highly customizable twitter bootstrap style checkboxes and radio buttons with nearly about 25 built-in options and 6 skins. icheck boxes are generally based on twitter bootstrap styles. So make certain that you link the bootstrap stylesheet property in the header and use the default markup structure:

<div class="checkbox icheck-primary">

    <input type="checkbox" id="someCheckboxId" />

    <label for="someCheckboxId">Click to check</label>


icheck buttons

  • Fully Customizable Radio buttons and checkboxes: jQuery plugin used to beautify the default checkboxes and radio buttons using CSS and JavaScript. For thno images are required.
Radio buttons and check boxes

  • el-checkbox: el- checkbox is a pure CSS/CSS3 library to create custom checkboxes, radio buttons and iOS styles toggle switches.

  • Checkboxes.css: Used to prettify the regular checkbox inputs with custom styles.


  • Beautiful- checkbox.css: Allows you to beautify and change styles, sizes, and positions of the native checkbox inputs with pure CSS. 

  • Toggle Group Buttons: CSS is the only solution that converts a series of radio inputs into toggle buttons and groups them in an inline button group with is the lightweight jQuery plugin that creates easily styleable toggle buttons. In this, you need to specify the theme you want to use. The toggle class is simply what we use as our selector to initialize it:

<div class="toggle toggle-modern">

Radio button


The above all radio buttons and checkboxes are created using JavaScript and jQuery plugins to create. 

  • Share Icon
  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • Reddit Icon
  • WhatsApp Icon
Share on
This is a YourStory community post, written by one of our readers.The images and content in this post belong to their respective owners. If you feel that any content posted here is a violation of your copyright, please write to us at and we will take it down. There has been no commercial exchange by YourStory for the publication of this article.
Report an issue
Krify Software Technology

Krify is a bespoke mobile applications and software services provider based in Chigwell, UK, and India. Our core competency includes Mobile app development, Web development, Wearable app development and, Digital marketing services. Krify extends its services to quality testing, content development, PR, SEO, etc. Creating value for our clients is our passion and software technology is our forte.

Related Tags