10 Best Custom Checkbox And Radio Input Replacements (2022 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 Jan 19 2022

Table of contents:

jQuery Custom Checkbox & Radio Plugins:

Checkbox Toggle Switch Plugin For Tailwind CSS Framework

A tiny and fast jQuery plugin that helps developers create checkbox based on/off switches in the latest Tailwind CSS framework.

Checkbox Toggle Switch Plugin For Tailwind CSS Framework

[Demo] [Download]


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]


jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck

A fancy and lightweight jQuery plugin that allows you to create touch-enabled, fully accessible, highly customizable checkboxes and radio buttons with 25 built-in options and 6 skins.

jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck

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


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]


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


Create Segmented Controls With Radio Buttons – Toggle Radios

A pure CSS library which converts a group or radios into responsive, customizable, SEO-friendly inline toggle button groups (also called segmented controls).

Create Segmented Controls With Radio Buttons – Toggle Radios

[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

icheck

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

Demo Download


Custom Checkbox And Radio Inputs In Pure CSS

A collection of CSS styles to customize the checkboxes and radio buttons with your own styles, images, and CSS sprites.

Custom Checkbox And Radio Inputs In Pure CSS

Demo Download

Conclusion:

Seeking more jQuery plugins or JavaScript libraries to create awesome Checkboxes and Radio buttons on the web & mobile? See Checkbox , jQuery Radio Button, JavaScript/CSS Checkbox, and JavaScript/CSS Radio button sections for more details.

More Resources: