pretty checkbox vue

Quickly integrate pretty checkbox Components with Vue.js

Installation

Step 1 : Download from yarn or npm

	             
    > yarn add pretty-checkbox-vue  //or
    > npm i --save pretty-checkbox-vue

Alternatively, you can also use CDN links

	
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
    <script src="https://cdn.jsdelivr.net/npm/pretty-checkbox-vue@1.1/dist/pretty-checkbox-vue.min.js"></script>
    <script>
        Vue.use(PrettyCheckbox);
    </script>

Step 2 : Add dist/pretty-checkbox.min.css file from pretty-checkbox package and add dist/pretty-checkbox-vue.min.js file from pretty-checkbox-vue package in your html or import src/pretty-checkbox.scss file from pretty-checkbox package in your scss file

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

and import pretty-checkbox-vue in your js file

	
    import PrettyCheckbox from 'pretty-checkbox-vue';

    Vue.use(PrettyCheckbox);

or you can use it this way

	
    import PrettyInput from 'pretty-checkbox-vue/input';
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';

    Vue.component('p-input', PrettyInput);
    Vue.component('p-check', PrettyCheck);
    Vue.component('p-radio', PrettyRadio);

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

	
    <p-check name="check" color="success" v-model="check">Check</p-check>

Basic checkbox

These are simple checkboxes with three shapes. Add class p-default

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

Default
show code
DefaultDefaultDefaultDefaultFillThick
Curve
show code
DefaultFillThick
Round
show code
DefaultFillThick
Switch

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

iOS style
show code
OutlineFillSlim
Colors

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

To apply colors, set primary to color attribute

Solid
show code
PrimarySuccessInfoWarningDanger
Mixed
show code
PrimarySuccessInfoWarningDanger
Show colors for all combinations
Outline
show code
PrimarySuccessInfoWarningDanger
Square & Fill
show code
PrimarySuccessInfoWarningDanger
Square & Fill & Outline
show code
PrimarySuccessInfoWarningDanger
Square & Thick
show code
PrimarySuccessInfoWarningDanger
Square & Thick & Outline
show code
PrimarySuccessInfoWarningDanger
Curve
show code
PrimarySuccessInfoWarningDanger
Curve & Outline
show code
PrimarySuccessInfoWarningDanger
Curve & Fill
show code
PrimarySuccessInfoWarningDanger
Curve & Fill & Outline
show code
PrimarySuccessInfoWarningDanger
Curve & Thick
show code
PrimarySuccessInfoWarningDanger
Curve & Thick & Outline
show code
PrimarySuccessInfoWarningDanger
Round
show code
PrimarySuccessInfoWarningDanger
Round & Outline
show code
PrimarySuccessInfoWarningDanger
Round & Fill
show code
PrimarySuccessInfoWarningDanger
Round & Fill & Outline
show code
PrimarySuccessInfoWarningDanger
Round & Thick
show code
PrimarySuccessInfoWarningDanger
Round & Thick & Outline
show code
PrimarySuccessInfoWarningDanger
Switch
show code
PrimarySuccessInfoWarningDanger
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 root element. Then add icon class along with font icon classes using extra as slot .

General
show code
Pay Bills Fuel refill Buy groceries

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 root element and svg to <svg> tag or <img> tag ( if svg file url is used as img source ).

General
show code
Recurring Done

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 root element anf image to <img> tag.

General
show code
Agree Subscribe Cancel Yes

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

Smooth
show code
Monday Tuesday WednesdayThursdayFriday
Jelly
show code
Interested All Bug
Tada
show code
Good Night Sweetheart
Rotate
show code
Friends Family
Pulse
show code
AllowOccasionally

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

General
show code
FavoriteAdd
Toggle

Toggles are simple show / hide type. Add attribute toggle to root element.

Previously, we have seen example with one state. Now we need to add similar state. the new state is accessible via off-label and off-extra slots. By default off state will be visible. On checking, default state will be visible.

Simple
show code
Subscribed
With icon
show code
ON
Without border
show code
Wifi on
With color
show code
Show preview Paused Bad
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
Remember me
Focus
show code
Remember me
Indeterminate
show code
Normal
Disable

Normal disabled attribute in root element is enough.

General
show code
CheckedNot checked
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 root element

Lock
show code
CheckedNot checked
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 root element

Bigger
show code
done doneclear

Alternatively, we can also set font-size property to root element

Radio buttons

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

Basic
show code
MaleFemaleSpecial
Colors
show code
PrimarySuccessInfoWarningDanger
Solid color and icons
show code
New York Paris Dubai Tokyo Istanbul
Outline colors
show code
Dollar Euro Dinar Pound Rupee
Animations
show code
HTML Javascript Python PHP Swift
Plain
show code
Single Married In relationship
Switch
show code
SummerWinterFall
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
fa-check fa-close fa-heart
Bootstrap Glyphicons
show code
glyphicon-ok glyphicon-remove glyphicon-heart info
Material icon ( MDI )
show code
mdi-check mdi-close mdi-heart
Material icon ( ZMDI )
show code
zmdi-check zmdi-close zmdi-favorite
Typeicons
show code
typcn-tick typcn-times typcn-heart
Ion icons
show code
ion-checkmark-round ion-close-round ion-ios-heart
Material icon ( Google )
show code
done doneclear clearfavorite favorite favorite_border

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
check check
Feathers
show code
circle square

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
Playground
Try it online before integrate it into your project.
Browser Compatability
Works in all latest browsers.
>= 10
>= 25
>= 40
>= 8
>= 25
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 pretty checkbox. 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