A pure CSS library to beautify checkbox and radio buttons.

Features

• 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, SVGs, and images
• State – Focus, Hover, Indeterminate
• Supports frameworks – Bootstrap, Foundation, Semantic UI, Bulma, …
• SCSS customization
• Supports all modern browsers, including mobile devices
• Print-friendly
• and more… (I am kidding, that’s all!)

Installation

You have several options for installing Pretty Checkbox:

• From CLI: Install the library from npm or yarn.
• Command: npm install pretty-checkbox or yarn add pretty-checkbox
• Add pretty-checkbox.min.css in your HTML
• From CDN: Use jsDelivr:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
    

• Manual download:
• Download the source from Github.

Usage

Pretty Checkbox comes with many styles. Here’s how to use the various features:

Basic Checkbox

    
    

        Check me
    

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

Switch Checkbox

    
    

        On
    

Custom Font Icons

    
    

        
        Check me
    

Note: The class icon should be added along with icon class names. For icons to work, you need to add the appropriate font icons library. In the above example, we used Font Awesome, so it must be included separately.

SVG Support

    
    

        
        Check me
    

Image Support

    
    

        
        Block
    

Colors

You can apply solid colors such as:

    
    

        Warning
    

Note: The color class must be added in the state class. Solid colors and outline colors have distinct roles in font icons and toggle features.

More Features

Pretty Checkbox has more features including Radio buttons, Toggle, States, Animations, Border-less, Lock, Scale, SCSS Settings. Please refer to the documentation to learn more about them.

Troubleshooting

If you encounter issues while using Pretty Checkbox, here are some troubleshooting ideas:

• Check that you have included the pretty-checkbox.min.css file correctly in your HTML.
• Ensure that your checkbox input is properly set up and has the correct class names.
• Test if the issue persists across different browsers to rule out browser-specific problems.
• Refer to the documentation for common issues and examples.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Browser Support

Pretty Checkbox 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
• Typicons
• Material icon (Google)
• Others not tested, but will work (99%).

SVG Libraries

• UIKit
• Feathers
• Others

Libraries

• VueJs – pretty-checkbox-vue
• Angular – ngx-pretty-checkbox

Inspiration

• Awesome Bootstrap Checkbox – Idea
• Animista – Animations

Contributions

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

License

This project is licensed under the MIT License.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.