pretty checkbox

A pure CSS library to beautify checkbox and radio buttons

Star
Installation

Step 1 : Download from yarn or npm

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

Alternatively, you can also use CDN link

	
    https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css

Step 2 : Add dist/pretty-checkbox.min.css file in your html or import src/pretty-checkbox.scss file in your scss file

	
    @import '~pretty-checkbox/src/pretty-checkbox.scss';

Step 3 : Add the mark up in your file. Can be used with Bootstrap, Foundation, Bulma frameworks.

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

Basic checkbox

These are simple checkboxes with three shapes. Add class p-default as like mentioned in above example.

By default, it will be in Square shape. To change, add class p-curve or p-round.

Default
show code
Curve
show code
Round
show code
Switch

Add class p-switch. For shapes add class, p-outline or p-fill or p-slim

iOS style
show code
Colors

There are five colors. . Can be used as Solid ( p-primary ) or Outline ( p-primary-o ).

To apply colors, add class p-primary to .state class inside .pretty

Solid
show code
Mixed
show code
Show colors for all combinations
Outline
show code
Square & Fill
show code
Square & Fill & Outline
show code
Square & Thick
show code
Square & Thick & Outline
show code
Curve
show code
Curve & Outline
show code
Curve & Fill
show code
Curve & Fill & Outline
show code
Curve & Thick
show code
Curve & Thick & Outline
show code
Round
show code
Round & Outline
show code
Round & Fill
show code
Round & Fill & Outline
show code
Round & Thick
show code
Round & Thick & Outline
show code
Switch
show code
Hide combinations

Colors can be added, removed, changed from SCSS settings.

Font icons

You can add any font icons to replace basic checkbox styles. There are two classes to be added. First, p-icon to .pretty. Then add icon class along with font icon classes inside .state .

General
show code

This library doesnt comes with any font icons. You need to add appropriate font icon library in your application. In above example, we have used mdi mdi-check, which is from Material design icons library. So, we need to add that library.

Svg

Adding svg icon is very similar to adding font icons. Add class p-svg to .pretty and svg to <svg> tag or <img> tag ( if svg file url is used as img source ).

General
show code

SVG's are quite different and unpredictable to apply colors properly. This library tries to color it based on few assumptions. Sometimes, it might return weird results. Dont curse me, in those cases.

Image

Adding image is also similar approach like above. Add class p-image to .pretty anf image to <img> tag.

General
show code

Good news is, images are automatically resized to fit in to the checkbox. But still, its wise to use small and transparent images for better results. And Obviously, colors are not applicable to images, unless I am the GOD.

Animations

To animate, add class p-smooth or p-jelly or p-tada or p-rotate or p-pulse to .pretty

Smooth
show code
Jelly
show code
Tada
show code
Rotate
show code
Pulse
show code

Due to the nature of different checkbox design, certain animations are not applicable in some combinations that were disussed below.

Plain

To remove the border ( when checkbox is checked ) add class p-plain to .pretty.

General
show code
Toggle

Toggles are simple show / hide type. Add class p-toggle to .pretty.

Previously, we have seen example with one state. Now we need to add similar state. Each one will have class p-on and p-off class. By default p-off state will be visible. On checking, p-on will be visible.

Simple
show code
With icon
show code
Without border
show code
With color
show code
Without label
show code

Checkbox styles cannot be mixed. If it is p-svg style, both states should be svg.

States

These are checkbox and radio button states like hover, focus, indeterminate. Please check the example code for details.

Hover
show code
Focus
show code
Indeterminate
show code
Disable

Normal disabled attribute in checkbox is enough.

General
show code
Lock

It is quite similar to disable, but the only difference is, it will lock and make it look like active. To lock, add class p-locked to .pretty

Lock
show code
Size

Basically, all the checkbox and radio buttons are sized based on the font size. Bigger the font size, bigger the checkbox and radio. Sometimes, you might need to scale it bit bigger. To do so, add class p-bigger to .pretty

Bigger
show code
done

Alternatively, we can also set font-size property to class .pretty

Radio buttons

Styling radio buttons are very similar to checkbox. All those features mentioned above, will wotk for radio buttons.

Basic
show code
Colors
show code
Solid color and icons
show code
Outline colors
show code
Animations
show code
Plain
show code
Switch
show code
Tested font icon libraries

Here's the tested font icon libraries. But however, other icon libraries, and icons created from icomoon, fontastic should also work.

Font awesome
show code
Bootstrap Glyphicons
show code
Material icon ( MDI )
show code
Material icon ( ZMDI )
show code
Typeicons
show code
Ion icons
show code
Material icon ( Google )
show code
done
clear
favorite_border
favorite

Some font icons might have inaccurate 'X' aspect ratio or some alignment issue. In those cases, the icon will have minute extra space in top or bottom. No worries, it is quite easy to fix it youself :)

Tested SVG libraries

These are couple of well known svg libraries which is tested at this moment.

UIKit
show code
Feathers
show code

But my instict says, other libraries also should work.

Scalability
Try changing font size
show code
SCSS Customize
Settings

    // If you felt the name is not-so-pretty,
    // you can always change!

    $pretty--class-name: pretty;

    // are you sure, you wanna change my handpicked
    // awesome super duper colors?

    $pretty--color-default:#bdc3c7;
    $pretty--color-primary:#428bca;
    $pretty--color-info:#5bc0de;
    $pretty--color-success:#5cb85c;
    $pretty--color-warning:#f0ad4e;
    $pretty--color-danger:#d9534f;
    $pretty--color-dark:#5a656b;

    // uh, boring z-index stuff, who cares.

    $pretty--z-index-back:0;
    $pretty--z-index-between:1;
    $pretty--z-index-front:2;

    // nobody will change this.

    $pretty--debug:false;
    $pretty--dev-err:'Invalid input type!';
Import

    /* REQUIRED */
    @import '~pretty-checkbox/scss/variables';
    @import '~pretty-checkbox/scss/core';

    /* OPTIONALS */
    @import '~pretty-checkbox/scss/elements/default/fill';
    @import '~pretty-checkbox/scss/elements/default/outline';
    @import '~pretty-checkbox/scss/elements/default/thick';

    @import '~pretty-checkbox/scss/elements/font-icon/general';

    @import '~pretty-checkbox/scss/elements/svg/general';

    @import '~pretty-checkbox/scss/elements/image/general';

    @import '~pretty-checkbox/scss/elements/switch/general';
    @import '~pretty-checkbox/scss/elements/switch/fill';
    @import '~pretty-checkbox/scss/elements/switch/slim';

    @import '~pretty-checkbox/scss/extras/toggle';
    @import '~pretty-checkbox/scss/extras/plain';
    @import '~pretty-checkbox/scss/extras/round';
    @import '~pretty-checkbox/scss/extras/curve';
    @import '~pretty-checkbox/scss/extras/animation';
    @import '~pretty-checkbox/scss/extras/disabled';
    @import '~pretty-checkbox/scss/extras/locked';
    @import '~pretty-checkbox/scss/extras/colors';
    @import '~pretty-checkbox/scss/extras/print';

    @import '~pretty-checkbox/scss/states/hover';
    @import '~pretty-checkbox/scss/states/focus';
    @import '~pretty-checkbox/scss/states/indeterminate';
More
Browser Compatability
Works in all latest browsers.
>= 10
>= 25
>= 40
>= 8
>= 25
Framework Plugins
VueJS plugin - pretty-checkbox-vue
Angular library - ngx-pretty-checkbox
Framework Compatability
Inspirations
Awesome Bootstrap Checkbox - Idea
Animista - Animations.
Contributions
Thanks to all those good people who spend their valuable time and helped to improve this library. And hey, if you found a issue, or would like to improve the code, you are always welcome!
Support and share
Credits
Image icons made by Pixel Buddha, Gregor Cresnar, Freepik, Maxim Basinski from www.flaticon.com
Svg icons from useiconic · sparkk.fr
Slider generated from range.css
Licence
The MIT License