10 Best Checkbox And Radio Input Replacements (2022 Update)

This is an up-to-date list of the 10 best PURE CSS libraries that can be used to beautify and enhance the native, ugly, hard-to-style checkboxes and radio buttons in your HTML forms. I hope you like it.

Originally Published Dec 28 2017, updated Mar 17 2022

See also:

1. Bootstrap Image Checkbox

Bootstrap Image Checkbox

Demo Download

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


2. Create Segmented Controls With Radio Buttons – Toggle Radios

Create Segmented Controls With Radio Buttons – Toggle Radios

[Demo] [Download]

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


3. el-checkbox

el-checkbox

Demo Download

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


4. icheck

icheck

Demo Download

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


5. Custom Checkbox And Radio Inputs In Pure CSS

Custom Checkbox And Radio Inputs In Pure CSS

Demo Download

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


6. Magic-check

Magic-check

Demo Download

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


7. Awesome Bootstrap Checkbox

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


8. icheck-material

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

Demo Download

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


9. Radio Input Based Toggle Button Group With Pure CSS

Radio Input Based Toggle Button Group With Pure CSS

Demo Download

A CSS only solution that converts a series of radio inputs into toggle buttons and groups them in an inline button group with gradients.


10. Create Custom Switches With Checkboxes – Toggle Switchy

A pure CSS library that converts the native checkbox inputs into responsive, accessible, SEO-friendly toggle switches with custom styles, sizes, colors, labels, and more.

Create Custom Switches With Checkboxes – Toggle Switchy

[Demo] [Download]


Leave a Reply

You Might Be Interested In: