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

• 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

• From CDN ( jsDelivr )

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>

• Manual download ( )

Download the source from .

<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.

Pretty checkbox comes with many styles,

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

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

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

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

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

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

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 awesome
• Bootstrap Glyphicons
• Material icon ( MDI )
• Material icon ( ZMDI )
• Ion icons
• Typicons
• Material icon ( Google )
• Others not tested, but will work ( 99% ).

• UIKit
• Feathers
• Others

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

• Awesome Bootstrap Checkbox - Idea
• Animista - Animations

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