Skip to content

lokesh-coder/pretty-checkbox

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

65 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


Pretty checkbox

pretty-checkbox.css

A pure css library to beautify checkbox and radio buttons.

Github Release Licence Size


Features

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

Demo and documentation

๐ŸŒ https://lokesh-coder.github.io/pretty-checkbox/

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

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

Usage

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)

Basic checkbox,

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

Switch has three variants --outline --fill --slim

<div class="pretty --switch --fill">
    <input type="checkbox" />
    <div class="state">
        <label>On</label>
    </div>
</div>

Custom Font icons,

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.

SVG

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.

Image

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.

Colors

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.

More

There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to learn about them.

Browser support

IE >= 10 Firefox >= 3.6 Chrome >= 14 Safari >= 6 Opera >= 11.6

Font Icon libraries

  • Font awesome
  • Bootstrap Glyphicons
  • Material icon ( MDI )
  • Material icon ( ZMDI )
  • Ion icons
  • Typeicons
  • Material icon ( Google )
  • Others not tested, But will work.

SVG

  • UIKit
  • Feathers
  • Others

Inspiration

Contributions

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

Licence

This project is licensed under the MIT License - see the LICENSE.md file for details

Built with โค๏ธ