pretty-checkbox

A pure CSS library to beautify checkbox and radio buttons.

1,806

151

1,806

View on GitHub View on NPM

Top Related Projects

microtip

1,383

💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.

uikit

18,293

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Quick Overview

Pretty Checkbox is a pure CSS library for customizing checkboxes and radio buttons with minimal effort. It offers a wide range of styles, animations, and color options to enhance the visual appeal of form elements without relying on JavaScript or images.

Pros

Easy to implement with minimal CSS and no JavaScript required
Highly customizable with various styles, colors, and animations
Responsive and compatible with major browsers
Lightweight and performance-optimized

Cons

Limited to styling checkboxes and radio buttons only
May require additional effort to integrate with existing CSS frameworks
Some advanced features might need custom CSS tweaks

Code Examples

Basic checkbox:

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

Radio button with custom color:

<div class="pretty p-default p-round p-smooth">
    <input type="radio" name="radio1" />
    <div class="state p-success">
        <label>Success</label>
    </div>
</div>

Checkbox with icon:

<div class="pretty p-icon p-rotate">
    <input type="checkbox" />
    <div class="state p-danger">
        <i class="icon mdi mdi-check"></i>
        <label>Danger</label>
    </div>
</div>

Getting Started

Include the Pretty Checkbox CSS in your HTML:

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

Use the Pretty Checkbox classes in your HTML:

<div class="pretty p-default">
    <input type="checkbox" />
    <div class="state">
        <label>I agree to the terms and conditions</label>
    </div>
</div>

Customize as needed by adding additional classes or modifying the CSS.

Competitor Comparisons

microtip

1,383

💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.

Pros of microtip

Lightweight and focused solely on tooltips, resulting in a smaller file size
No dependencies, making it easier to integrate into projects
Simpler API with fewer options, potentially easier to use for basic tooltip needs

Cons of microtip

Limited customization options compared to pretty-checkbox's extensive styling capabilities
Lacks advanced features like animations or complex layouts
Not actively maintained, with the last update being several years ago

Code Comparison

microtip:

<button aria-label="Label" data-microtip-position="top" role="tooltip">
  Hover me
</button>

pretty-checkbox:

<div class="pretty p-default p-round p-smooth">
  <input type="checkbox" />
  <div class="state p-success">
    <label>Checkbox</label>
  </div>
</div>

While both projects aim to enhance UI elements, they serve different purposes. microtip focuses on simple tooltips, while pretty-checkbox offers extensive checkbox customization. The code comparison shows that microtip uses data attributes for configuration, whereas pretty-checkbox relies on CSS classes for styling. pretty-checkbox provides more visual options but requires more markup, while microtip offers a more straightforward implementation for basic tooltips.

uikit

18,293

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Pros of UIkit

Comprehensive UI framework with a wide range of components and utilities
Extensive documentation and community support
Responsive design and mobile-first approach

Cons of UIkit

Larger file size and potential performance impact
Steeper learning curve due to its extensive feature set
Less focused on specific form elements like checkboxes

Code Comparison

UIkit checkbox:

<label><input class="uk-checkbox" type="checkbox"> Checkbox</label>

Pretty Checkbox:

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

Summary

UIkit is a full-featured UI framework offering a wide range of components and utilities, while Pretty Checkbox focuses specifically on enhancing checkbox and radio button styling. UIkit provides more comprehensive tools for building entire web applications, but may be overkill for projects that only need custom form elements. Pretty Checkbox offers a lightweight solution for developers seeking to improve the appearance of checkboxes and radio buttons without adopting a complete UI framework.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

Demo and documentation
https://lokesh-coder.github.io/pretty-checkbox/

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 / 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! )

Installation

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

From CDN ( jsDelivr )

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

Manual download ( Github )

Download the source from Github.

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

<PATH> is where the library is downloaded.

SCSS

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.

Usage

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>
    </div>
  </div>

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">
      <label>Fill</label>
    </div>
  </div>

---

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">
      <label>On</label>
    </div>
  </div>

---

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>
    </div>
  </div>

_{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.}

_{more details}

---

SVG

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>
    </div>
  </div>

_{Note: class `svg` to be added in img tag or svg tag.}

_{more details}

---

Image

Supports any type of valid image format.

  <div class="pretty p-image">
    <input type="checkbox" />
    <div class="state">
      <img class="image" src="/check.png" />
      <label>Block</label>
    </div>
  </div>

_{Note: class `image` to be added in img tag.}

_{more details}

---

Colors

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">
      <label>Warning</label>
    </div>
  </div>

_{Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.}

_{more details}

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

Contributions

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

License

This project is licensed under the MIT License

_â¤

Top Related Projects

microtip

1,383

💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.

uikit

18,293

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

pretty-checkbox

Top Related Projects

microtip

uikit

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

microtip

Pros of microtip

Cons of microtip

Code Comparison

uikit

Pros of UIkit

Cons of UIkit

Code Comparison

Summary

Convert designs to code with AI

README

pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

Features

Installation

Usage

Basic checkbox

Switch checkbox

Custom Font icons

SVG

Image

Colors

More

Browser support

Font Icon libraries

SVG

Libraries

Inspiration

Contributions

License

Top Related Projects

microtip

uikit

Convert designs to code with AI

NPM DownloadsLast 30 Days