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

by jQueryScript,

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

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

See also:

Originally Published Nov 30 2017, updated Feb 27 2021

Table of contents:

jQuery Custom Checkbox & Radio Plugins:

Radio Button Based Dropdown Select with jQuery and CSS3 - Dropp

Dropp is a jQuery script that converts a group of radio buttons into a beautiful select like dropdown list using CSS/CSS3 and input label tricks.

Radio Button Based Dropdown Select with jQuery and CSS3 - Dropp

[Demo] [Download]


Create Inline Checkbox & Radio Buttons In Bootstrap - TWS Toggle Buttons

A small jQuery plugin for Bootstrap 3/4 that transforms the normal checkbox and radio inputs into user-friendly toggle buttons using Bootstrap's Button Group component.

Create Inline Checkbox & Radio Buttons In Bootstrap - TWS Toggle Buttons

[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.

jQuery Toggle Button Plugin For Bootstrap - Bootstrap Checkbox

[Demo] [Download]


Nice Checkbox And Radio Button Replacement Plugin - nicelabel.js

nicelabel.js is a tiny jQuery plugin that converts the default checkboxes and radio buttons into nice toggleable switches and/or selectable labels.

Nice Checkbox And Radio Button Replacement Plugin - nicelabel.js

[Demo] [Download]


Switch Style Radio Buttons In jQuery - Simple Input Toggle

The jQuery Simple Input Toggle plugin transforms the normal radio inputs into switch-style toggle buttons for better user experience.

Switch Style Radio Buttons In jQuery - Simple Input Toggle

[Demo] [Download]


Pure CSS Custom Checkbox & Radio Replacements:

Bootstrap Image Checkbox

Bootstrap Image Checkbox

A CSS extension for the Bootstrap 4 that provides a pretty nice image picker UI to select images using checkbox or radio inputs.

Demo Download


icheck

icheck

A CSS extension for Bootstrap that allows you to apply custom styles to the default checkboxes and radio buttons.

Demo Download


Magic-check

Magic-check

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

Demo Download


el-checkbox

el-checkbox

A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.

Demo Download


icheck-material

Material Design Checkboxes & Radio Buttons In Pure CSS - icheck-material

icheck-material is a CSS/CSS3 library that lets you beautify & animate the regular checkboxes and radio buttons with Material Design styles.

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.