A pure CSS library to beautify checkbox and radio buttons.
Demo and documentation
- 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
- Custom Font Icons
- SVG Icons
- Image support
- Toggle between icons / SVG's / images
- 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! )
npm install @djthoms/pretty-checkbox # oryarn add @djthoms/pretty-checkbox
pretty-checkbox.min.css in your html:
Download the source from
<PATH> is where the library is downloaded.
You can also import
pretty-checkbox.scss in your main scss file.
Please refer the document for SCSS settings.
Pretty checkbox comes with many styles,
||iOS like toggle style|
||Custom font icons|
||Custom SVG files, markup|
And three shapes
Basic checkbox has three variants
You can combine them.
Switch has three variants
Custom Font icons
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
Note: class `svg` to be added in img tag or svg tag.
Supports any type of valid image format.
Note: class `image` to be added in img tag.
There are five solid colors
And five outline colors
Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.
rtl.css in your source file 😄
There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.
Please refer the documentation to know about them.
Works in all modern browsers.
Chrome >= 26
Firefox >= 16
Safari >= 6.1
Opera >= 15
IE >= 9
Font Icon libraries
- Font awesome
- Bootstrap Glyphicons
- Material icon ( MDI )
- Material icon ( ZMDI )
- Ion icons
- Material icon ( Google )
- Others not tested, but will work ( 99% ).
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