- Basic
- Shapes - Square, Curve, Round
- Variants - Default, Fill, Thick
- Colors - Primary, Success, Info, Warning, Danger
- Color types - Solid, Outline
- Animations - Smooth, Tada, Jelly, Rotate
- Switch - iOS style - Outline, Fill, Slim
- Responsive
- No Javascript
- Custom Font Icons
- Svg Icons
- Image
- Toggle
- Lock
- State - Focus, Hover, Inderterminate
- Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma, ...
- Customize nearly everything with SCSS
- Print friendly
- and more... ( I am kidding, thats all! )
๐ https://lokesh-coder.github.io/pretty-checkbox/
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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty-checkbox.min.css"/>
Manual download
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.scss';
Pretty checkbox comes with many styles,
Style class | Description |
---|---|
--default |
Basic checkbox |
--switch |
iOs like toggle switch |
--icon |
using custom font icons |
--svg |
using custom SVG |
--image |
using small images |
And three shapes --round
--curve
--square
(default)
<div class="pretty --default">
<input type="checkbox">
<div class="state">
<label>Check me</label>
</div>
</div>
Basic checkbox has three variants --fill
--thick
--outline
(default)
You can combine them.
<div class="pretty --default --curve --fill">
<input type="checkbox" />
<div class="state">
<label>Fill</label>
</div>
</div>
Switch has three variants --outline
--fill
--slim
<div class="pretty --switch --fill">
<input type="checkbox" />
<div class="state">
<label>On</label>
</div>
</div>
checkbox with fonticon,
<div class="pretty --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.
Checkout the documentation for tested font icon libraries.
checkbox with svg,
<div class="pretty --svg">
<input type="checkbox">
<div class="state">
<img class="svg" src="file.svg">
<label>Check me</label>
</div>
</div>
Support, SVG file in img tag, svg markup (<svg> ... </svg>
)
Note: class
svg
to be added in img tag or svg tag.
Checkout the documentation for different formats and tested svg libraries.
checkbox with image,
<div class="pretty --image">
<input type="checkbox" />
<div class="state">
<img class="image" src="/check.png">
<label>Block</label>
</div>
</div>
Support, SVG file in img tag, svg markup (<svg> ... </svg>
)
Note: class
svg
to be added in img tag or svg tag.
Checkout the documentation for different formats and tested svg libraries.
There are five solid colors --primary
--success
--warning
--info
--danger
And five outline colors --primary-o
--success-o
--warning-o
--info-o
--danger-o
<div class="pretty --default --curve --thick">
<input type="checkbox" />
<div class="state --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.
Checkout the documentation for complete demo of color combinations with above styles.
There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.
Please refer the documentation to learn about them.
IE >= 10
Firefox >= 3.6
Chrome >= 14
Safari >= 6
Opera >= 11.6
- Font awesome
- Bootstrap Glyphicons
- Material icon ( MDI )
- Material icon ( ZMDI )
- Ion icons
- Typeicons
- Material icon ( Google )
- Others not tested, But will work.
- UIKit
- Feathers
- Others
- Inspired from Okendoken's awesome-bootstrap-checkbox.
- Animations are heavily inspired ( copied ๐ ) from Animista
Thanks for 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 - see the LICENSE.md file for details