Repository files navigation

Demo and documentation
https://lokesh-coder.github.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 fromnpm oryarn package manager

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

Addpretty-checkbox.min.css in your html

• From CDN (jsDelivr )

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

• Manual download (Github )

Download the source from Github.

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

<PATH> is where the library is downloaded.

SCSS

You can also importpretty-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 shapesp-roundp-curvep-square (default)

<divclass="pretty p-default"><inputtype="checkbox"/><divclass="state"><label>Check me</label></div></div>

Basic checkbox has three variantsp-fillp-thickp-outline (default)

You can combine them.

<divclass="pretty p-default p-curve p-fill"><inputtype="checkbox"/><divclass="state"><label>Fill</label></div></div>

Switch has three variantsp-outlinep-fillp-slim

<divclass="pretty p-switch p-fill"><inputtype="checkbox"/><divclass="state"><label>On</label></div></div>

<divclass="pretty p-icon"><inputtype="checkbox"><divclass="state"><iclass="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

<divclass="pretty p-svg"><inputtype="checkbox"><divclass="state"><imgclass="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.

<divclass="pretty p-image"><inputtype="checkbox"/><divclass="state"><imgclass="image"src="/check.png"/><label>Block</label></div></div>

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

There are five solid colorsp-primaryp-successp-warningp-infop-danger

And five outline colorsp-primary-op-success-op-warning-op-info-op-danger-o

<divclass="pretty p-default p-curve p-thick"><inputtype="checkbox"/><divclass="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 likeRadio buttons ,Toggle ,States ,Animations ,Border less ,Lock ,Scale,SCSS Settings.

Please refer thedocumentation to know about them.

Works in all modern browsers.

Chrome >= 26Firefox >= 16Safari >= 6.1Opera >= 15IE >= 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