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

Tired of the ugly native checkboxes and radio buttons in the form?

This is a collection of 10 best free jQuery, Vanilla JavaScript, and Pure CSS alternatives to enhance, beautify and manipulate the default native checkboxes and radio buttons in your document. I hope you like it.

See also:

• 10 Best Toggle Switch Plugins
• Top 10 Checkbox & Radio Button Replacement Libraries

Originally Published Nov 30 2017, updated June 02 2019

Table of contents:

• jQuery Custom Checkbox & Radio Plugins
• Vanilla JS Custom Checkbox & Radio Libraries
• Pure CSS Custom Checkbox & Radio Replacements

jQuery Custom Checkbox & Radio Plugins:

jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck

iCheck is a fancy and lightweight jQuery plugin that allows you to create beautiful and highly customizable checkboxes and radio buttons with 25 built-in options and 6 skins.

[Demo] [Download]

---

jQuery Toggle Button Plugin For Bootstrap - Bootstrap Checkbox

Bootstrap Checkbox is a jQuery/Bootstrap plugin that converts a normal checkbox into a nice-looking toggle button control.

[Demo] [Download]

---

jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty

Labelauty is a stunning and subtle jQuery plugin for creating checkboxes and radio buttons with checked or unchecked custom labels.

[Demo] [Download]

---

Fully Customizable Radio Buttons / Checkboxes with jQuery and CSS

Yet another jQuery plugin used to beautify the default checkboxes and radio buttons using CSS and javascript, no images required.

[Demo] [Download]

---

jQuery Plugin For Checkbox Based Toggle Buttons - TinyToggle

TinyToggle contains a jQuery plugin and a web font that allows you to convert checkboxes into beautiful on / off toggle buttons / switches using Html5 data-* attributes. Features: 13 different types 8 different sizes and palettes 4 callback

[Demo] [Download]

---

Vanilla JS Custom Checkbox & Radio Libraries:

Material Design Inspired Custom Html Inputs with CSS & Javascript

Helps you create custom Html controls (text fields, checboxes, radio buttons) inspired the Google Material Design guidelines. Works perfect with Bootstrap CSS framework and compatible with any modern browsers including IE 9+.

[Demo] [Download]

---

Animated Checkbox Input Enhancement In Vanilla JavaScript – Checkbix

Checkbix is a small vanilla JavaScript library used to create customizable, animated, nice-looing checkbox inputs for your html form.

[Demo] [Download]

---

Pure CSS Custom Checkbox & Radio Replacements:

Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

A pure CSS solution to beautify the default checkboxes & radio buttons with Bootstrap styles.

[Demo] [Download]

---

Beautiful Checkbox And Radio Button Replacement With Pure CSS – Magic-check

Magic-check is a very small CSS library used for replacing the default ugly checkboxes and radio buttons.

[Demo] [Download]

---

Pretty Custom Checkboxes & Radio Buttons with Pure CSS – CSS3 Checkbox

A CSS library which helps you create easy-to-customizable checkboxes and radio buttons to make your form more pretty.

[Demo] [Download]

---

Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Checkboxes and Radio buttons on the web & mobile? Check out the Checkbox , jQuery Radio Button, JavaScript/CSS Checkbox, and JavaScript/CSS Radio button sections.