Pretty Checkbox

A pure CSS library to beautify checkbox and radio buttons.
Alternatives To Pretty Checkbox
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Bootstrap Table11,571247452 days ago44July 06, 2023210mitJavaScript
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Vxe Table6,527234812 days ago1,276August 03, 2023636mitTypeScript
vxe-table vue 表单/表格解决方案
Bootstrap Switch5,109622582 years ago16April 13, 2019200mitPug
Turn checkboxes and radio buttons in toggle switches.
Ztree_v33,99788a year ago1March 28, 201662mitHTML
jQuery Tree Plugin
Awesome Bootstrap Checkbox2,04526543a year ago10March 06, 2018mitCSS
✔️Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier
Pretty Checkbox1,549121593 years ago15October 21, 201745mitCSS
A pure CSS library to beautify checkbox and radio buttons.
Jquery Labelauty919
16 years ago1July 25, 20177mitCSS
A lightweight and beautiful jQuery plugin for radio and checkbox inputs.
Shinywidgets765581136 days ago30May 11, 202288gpl-3.0R
shinyWidgets : Extend widgets available in shiny
Formbase56961a year ago22June 19, 2021mitSCSS
Better default styles for common input elements.
Xamarin.forms.inputkit5471682 months ago106September 17, 202262mitC#
CheckBox, Radio Button, Labeled Slider, Dropdowns etc.
Alternatives To Pretty Checkbox
Select To Compare

Alternative Project Comparisons

Pretty checkbox


A pure CSS library to beautify checkbox and radio buttons.

Github Release Licence Downloads

Pretty checkbox preview


  • Basic
    • Shapes - Square, Curve, Round
    • Variants - Default, Fill, Thick
    • Colors - Primary, Success, Info, Warning, Danger
    • Color types - Solid, Outline
    • Animations - Smooth, Tada, Jelly, Pulse, Rotate
  • Switch - iOS style - Outline, Fill, Slim
  • Responsive
  • No JavaScript
  • Custom Font Icons
  • SVG Icons
  • Image support
  • Toggle between icons / SVG's / images
  • Lock
  • State - Focus, Hover, Indeterminate
  • Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma, ...
  • SCSS customization
  • Supports all modern browsers, including mobile devices
  • Print friendly
  • and more... ( I am kidding, that's all! )


  • From CLI

Install the library from npm or yarn package manager

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

Add pretty-checkbox.min.css in your html

<link rel="stylesheet" href="[email protected]/dist/pretty-checkbox.min.css"/>

Download the source from Github.

<link rel="stylesheet" href="../<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css"/>

<PATH> is where the library is downloaded.


You can also import pretty-checkbox.scss in your main scss file.

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Please refer the document for SCSS settings.


Pretty checkbox comes with many styles,

Class name Description
p-default Basic style
p-switch iOS like toggle style
p-icon Custom font icons
p-svg Custom SVG files, markup
p-image Tiny images

And three shapes p-round p-curve p-square (default)

Basic checkbox

  <div class="pretty p-default">
    <input type="checkbox" />
    <div class="state">
      <label>Check me</label>

Basic checkbox has three variants p-fill p-thick p-outline (default)

You can combine them.

  <div class="pretty p-default p-curve p-fill">
    <input type="checkbox" />
    <div class="state">

Switch checkbox

Switch has three variants p-outline p-fill p-slim

  <div class="pretty p-switch p-fill">
    <input type="checkbox" />
    <div class="state">

Custom Font icons

  <div class="pretty p-icon">
    <input type="checkbox">
    <div class="state">
      <i class="icon fa fa-check"></i>
      <label>Check me</label>
Note: class `icon` should be added along with icon class names
Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.


Supports SVG file in tag, markup (<svg> ... </svg>) and sprites

  <div class="pretty p-svg">
    <input type="checkbox">
    <div class="state">
      <img class="svg" src="file.svg" />
      <label>Check me</label>
Note: class `svg` to be added in img tag or svg tag.


Supports any type of valid image format.

  <div class="pretty p-image">
    <input type="checkbox" />
    <div class="state">
      <img class="image" src="/check.png" />
Note: class `image` to be added in img tag.


There are five solid colors p-primary p-success p-warning p-info p-danger

And five outline colors p-primary-o p-success-o p-warning-o p-info-o p-danger-o

  <div class="pretty p-default p-curve p-thick">
    <input type="checkbox" />
    <div class="state p-warning">
Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.


There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to know about them.

Browser support

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9

Font Icon libraries





Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!


This project is licensed under the MIT License

Popular Radio Projects
Popular Checkbox Projects
Popular Media Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Radio Buttons
Font Icons