pretty-checkbox-vue

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

Default

Fill

Thick


    <!-- add class p-default -->
    <p-check class="p-default">Default</p-check>
    <!-- or if it's only p-default you can leave out class attribute -->
    <p-check>Default</p-check>
    <!-- you can use p-input too -->
    <p-input>Default</p-input>
    <!-- or -->
    <p-input type="checkbox">Default</p-input>

    <!-- add class p-fill -->
    <p-check class="p-default p-fill">Fill</p-check>

    <!-- add class p-thick -->
    <p-check class="p-default p-thick">Thick</p-check>

Curve

show code

Default

Fill

Thick


    <!-- add class p-curve -->
    <p-check class="p-default p-curve">Default</p-check>

    <p-check class="p-default p-curve p-fill">Fill</p-check>

    <p-check class="p-default p-curve p-thick">Thick</p-check>

Round

show code

Default

Fill

Thick


    <!-- add class p-round -->
    <p-check class="p-default p-round">Default</p-check>

    <p-check class="p-default p-round p-fill">Fill</p-check>

    <p-check class="p-default p-round p-thick">Thick</p-check>

Switch

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

iOS style

show code

Outline

Fill

Slim


    <!-- add class p-switch -->
    <p-check class="p-switch">Outline</p-check>

    <!-- add class p-switch -->
    <p-check class="p-switch p-fill">Fill</p-check>

    <!-- add class p-switch -->
    <p-check class="p-switch p-slim">Slim</p-check>

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

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check color="primary">Primary</p-check>

    <!-- success -->
    <p-check color="success">Success</p-check>

    <!-- info -->
    <p-check color="info">Info</p-check>

    <!-- warning -->
    <p-check color="warning">Warning</p-check>

    <!-- danger -->
    <p-check color="danger">Danger</p-check>

Mixed

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round p-thick" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-fill" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve p-thick" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve p-thick" color="danger-o">Danger</p-check>

Show colors for all combinations

Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check color="success-o">Success</p-check>

    <!-- info -->
    <p-check color="info-o">Info</p-check>

    <!-- warning -->
    <p-check color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check color="danger-o">Danger</p-check>

Square & Fill

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-fill" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-fill" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-fill" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-fill" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-fill" color="danger">Danger</p-check>

Square & Fill & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-fill" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-fill" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-fill" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-fill" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-fill" color="danger-o">Danger</p-check>

Square & Thick

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-thick" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-thick" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-thick" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-thick" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-thick" color="danger">Danger</p-check>

Square & Thick & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-thick" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-thick" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-thick" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-thick" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-thick" color="danger-o">Danger</p-check>

Curve

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve" color="danger">Danger</p-check>

Curve & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve" color="danger-o">Danger</p-check>

Curve & Fill

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve p-fill" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve p-fill" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve p-fill" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve p-fill" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve p-fill" color="danger">Danger</p-check>

Curve & Fill & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve p-fill" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve p-fill" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve p-fill" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve p-fill" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve p-fill" color="danger-o">Danger</p-check>

Curve & Thick

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve p-thick" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve p-thick" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve p-thick" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve p-thick" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve p-thick" color="danger">Danger</p-check>

Curve & Thick & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-curve p-thick" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-curve p-thick" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-curve p-thick" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-curve p-thick" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-curve p-thick" color="danger-o">Danger</p-check>

Round

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round" color="danger">Danger</p-check>

Round & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round" color="danger-o">Danger</p-check>

Round & Fill

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round p-fill" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round p-fill" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round p-fill" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round p-fill" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round p-fill" color="danger">Danger</p-check>

Round & Fill & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round p-fill" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round p-fill" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round p-fill" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round p-fill" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round p-fill" color="danger-o">Danger</p-check>

Round & Thick

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round p-thick" color="primary">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round p-thick" color="success">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round p-thick" color="info">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round p-thick" color="warning">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round p-thick" color="danger">Danger</p-check>

Round & Thick & Outline

show code

Primary

Success

Info

Warning

Danger


    <!-- primary -->
    <p-check class="p-default p-round p-thick" color="primary-o">Primary</p-check>

    <!-- success -->
    <p-check class="p-default p-round p-thick" color="success-o">Success</p-check>

    <!-- info -->
    <p-check class="p-default p-round p-thick" color="info-o">Info</p-check>

    <!-- warning -->
    <p-check class="p-default p-round p-thick" color="warning-o">Warning</p-check>

    <!-- danger -->
    <p-check class="p-default p-round p-thick" color="danger-o">Danger</p-check>

Switch

show code

Primary

Success

Info

Warning

Danger


    <!--
        Outline colors wont work for switches
    -->

    <p-check class="p-switch" color="primary">Primary</p-check>
    
    <p-check class="p-switch p-fill" color="success">Success</p-check>
    
    <p-check class="p-switch p-slim" color="info">Info</p-check>
    
    <p-check class="p-switch p-slim" color="warning">Warning</p-check>
    
    <p-check class="p-switch" color="danger">Danger</p-check>

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


    <p-check class="p-icon p-round">
        <i class="icon mdi mdi-check" slot="extra"></i>
        Pay Bills
    </p-check>

    <p-check class="p-icon p-curve">
        <i class="icon mdi mdi-close" slot="extra"></i>
        Fuel refill
    </p-check>

    <p-check class="p-icon">
        <i class="icon mdi mdi-close-outline" slot="extra"></i>
        Buy groceries
    </p-check>

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


    <p-check class="p-svg p-curve" color="success">
        <!-- svg path -->
        <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
            <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                  style="stroke: white;fill:white"></path>
        </svg>
        Recurring
    </p-check>

    <!-- file source -->
    <p-check class="p-svg p-plain">
        <img slot="extra" class="svg" src="svg/open-iconic/task.svg">
        Done
    </p-check>

    <!--
    Credit
    http://svgicons.sparkk.fr/
    -->

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

Cancel

Yes


    <!--
        Here we have used p-plain class to remove border for better looking.
        Please refer below PLAIN section to know more.
     -->

    <p-check class="pretty p-image p-plain">
        <img slot="extra" class="image" src="img/checked/001.png">
        Agree
    </p-check>
    
    <p-check class="pretty p-image p-plain">
        <img slot="extra" class="image" src="img/checked/002.png">
        Subscribe
    </p-check>
    
    <p-check class="pretty p-image p-plain">
        <img slot="extra" class="image" src="img/checked/003.png">
        Cancel
    </p-check>
    
    <p-check class="pretty p-image p-plain">
        <img slot="extra" class="image" src="img/checked/004.png">
        Yes
    </p-check>

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

Wednesday

Thursday

Friday


    <p-check class="p-default p-round p-smooth" color="primary">Monday</p-check>

    <p-check class="p-icon p-round p-smooth" color="success">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Tuesday
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon mdi mdi-close"></i>
        Wednesday
    </p-check>

    <p-check class="p-default p-curve p-thick p-smooth" color="warning">Thursday</p-check>

    <p-check class="p-default p-curve p-thick p-smooth" color="danger-o">Friday</p-check>

Jelly

show code

Interested

All

Bug


    <!--
        jelly animation is not applicable to
        p-default style
    -->

    <p-check class="p-icon p-round p-jelly" color="primary">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Interested
    </p-check>

    <p-check class="p-icon p-jelly" color="info-o">
        <i slot="extra" class="icon mdi mdi-check-all"></i>
        All
    </p-check>

    <p-check class="p-icon p-curve p-jelly" color="danger">
        <i slot="extra" class="icon mdi mdi-bug"></i>
        Bug
    </p-check>

Tada

show code

Good

Night

Sweetheart


    <!--
        tada animation is not applicable to
        p-default style
    -->

    <p-check class="p-icon p-round p-tada" color="primary-o">
        <i slot="extra" class="icon mdi mdi-heart"></i>
        Good
    </p-check>

    <p-check class="p-icon p-curve p-tada p-plain">
        <i slot="extra" class="icon mdi mdi-weather-night"></i>
        Night
    </p-check>

    <p-check class="p-icon p-fill p-tada" color="danger">
        <i slot="extra" class="icon mdi mdi-skull"></i>
        Sweetheart
    </p-check>

Rotate

show code

Friends

Family


    <!--
        rotate animation is not applicable to
        p-default and p-switch style
    -->

    <p-check class="p-icon p-rotate" color="success">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Friends
    </p-check>

    <p-check class="p-icon p-rotate" color="danger-o">
        <i slot="extra" class="icon mdi mdi-close"></i>
        Family
    </p-check>

Pulse

show code

Allow

Occasionally


    <!--
        pulse animation is not applicable to
        p-default and p-switch style
    -->

    <p-check class="p-icon p-round p-pulse" color="success">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Allow
    </p-check>

    <p-check class="p-default p-thick p-pulse" color="warning-o">Occasionally</p-check>

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

Favorite

Add


    <!--
        For expected result, use outline color.
        like warning-o ( outline ) instead of warning ( solid )
    -->

    <p-check class="p-icon p-round p-smooth p-plain" color="warning-o">
        <i slot="extra" class="icon mdi mdi-star"></i>
        Favorite
    </p-check>

    <p-check class="p-default p-round p-smooth p-plain" color="success-o">Add</p-check>

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 Subscribe


    <p-check class="p-default p-curve" color="success" off-color="danger" toggle>
        Subscribed
        <label slot="off-label">Subscribe</label>
    </p-check>

With icon

show code

ON OFF


    <p-check class="p-icon" toggle>
        <i class="icon mdi mdi-microphone" slot="extra"></i>
        ON
        <i class="icon mdi mdi-microphone" slot="off-extra"></i>
        <label slot="off-label">OFF</label>
    </p-check>

Without border

show code

Wifi on Wifi off


    <p-check class="p-icon p-plain" toggle>
        <i class="icon mdi mdi-wifi" slot="extra"></i>
        Wifi on
        <i class="icon mdi mdi-wifi-off" slot="off-extra"></i>
        <label slot="off-label">Wifi off</label>
    </p-check>

With color

show code

Show preview Hide preview

Paused Playing...

Bad Good


    <p-check class="p-icon p-plain" color="success-o" toggle>
        <i class="icon mdi mdi-eye" slot="extra"></i>
        Show preview
        <i class="icon mdi mdi-eye-off" slot="off-extra"></i>
        <label slot="off-label">Hide preview</label>
    </p-check>

    <p-check class="p-icon p-plain" off-color="warning-o" toggle>
        <i class="icon mdi mdi-pause" slot="extra"></i>
        Paused
        <i class="icon mdi mdi-play" slot="off-extra"></i>
        <label slot="off-label">Playing...</label>
    </p-check>

    <p-check class="p-icon p-plain" color="danger-o" off-color="success-o" toggle>
        <i class="icon mdi mdi-thumb-down" slot="extra"></i>
        Bad
        <i class="icon mdi mdi-thumb-up" slot="off-extra"></i>
        <label slot="off-label">Good</label>
    </p-check>

Without label

show code


    <!-- Should not remove <label> tag -->
    <p-check class="p-icon" color="success-o" off-color="info-o" toggle>
        <i class="icon mdi mdi-reply" slot="extra"></i>
        <i class="icon mdi mdi-share" slot="off-extra"></i>
        <label slot="off-label"></label>
    </p-check>

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 Remembered for 15 days


    <p-check class="p-default p-curve" color="success-o" hover-color="danger-o" hover>
        Remember me
        <label slot="hover-label">Remembered for 15 days</label>
    </p-check>

Focus

show code

Remember me


    <p-check focus>Remember me</p-check>

Indeterminate

show code

Normal Indeterminate


    <!--
        .sync Modifier needs Vue 2.3.0+ (components work fine on Vue 2.2.0+) 
    -->

    <p-check class="p-icon p-curve" :indeterminate.sync="ind">
        <i class="icon mdi mdi-check" slot="extra"></i>
        Normal
        <i class="icon mdi mdi-minus" slot="indeterminate-extra"></i>
        <label slot="indeterminate-label">Indeterminate</label>
    </p-check>

Disable

Normal disabled attribute in root element is enough.

General

show code

Checked

Not checked


    <!-- Checked -->
    <p-check class="p-icon p-round" color="success" checked disabled>
        <i class="icon mdi mdi-check" slot="extra"></i>
        Checked
    </p-check>

    <!-- Not Checked -->
    <p-check class="p-default p-round" disabled>Not checked</p-check>

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

Checked

Not checked


    <!-- Checked -->
    <p-check class="p-icon p-round p-locked" color="success" checked>
        <i class="icon mdi mdi-check" slot="extra"></i>
        Checked
    </p-check>

    <!-- Not Checked -->
    <p-check class="p-default p-round p-locked" color="success">Not checked</p-check>

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

clear


    <p-check class="p-icon p-jelly p-round p-bigger" color="info">
        <i class="icon material-icons" slot="extra">done</i>
        done
    </p-check>

    <p-check class="p-default p-smooth p-bigger" color="danger">clear</p-check>

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

Male

Female

Special


    <p-radio class="p-default p-round" name="radio1">Male</p-radio>
    
    <!-- or if it's only p-default and p-round you can leave out class attribute -->
    <p-radio name="radio1">Female</p-radio>
    
    <!-- you can use p-input too -->
    <p-input type="radio" name="radio1">Special</p-input>

Colors

show code

Primary

Success

Info

Warning

Danger


    <p-radio class="p-default p-curve" name="color" color="primary-o">Primary</p-radio>

    <p-radio class="p-default p-curve" name="color" color="success-o">Success</p-radio>

    <p-radio class="p-default p-curve" name="color" color="info-o">Info</p-radio>

    <p-radio class="p-default p-curve" name="color" color="warning-o">Warning</p-radio>

    <p-radio class="p-default p-curve" name="color" color="danger-o">Danger</p-radio>

Solid color and icons

show code

New York

Paris

Dubai

Tokyo

Istanbul


    <p-radio class="p-icon p-round" name="icon_solid" color="primary">
        <i slot="extra" class="icon mdi mdi-check"></i>
        New York
    </p-radio>

    <p-radio class="p-icon p-round" name="icon_solid" color="success">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Paris
    </p-radio>

    <p-radio class="p-icon p-round" name="icon_solid" color="info">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Dubai
    </p-radio>

    <p-radio class="p-icon p-round" name="icon_solid" color="warning">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Tokyo
    </p-radio>

    <p-radio class="p-icon p-round" name="icon_solid" color="danger">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Istanbul
    </p-radio>

Outline colors

show code

Dollar

Euro

Dinar

Pound

Rupee


    <p-radio class="p-icon p-round" name="icon" color="primary-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Dollar
    </p-radio>

    <p-radio class="p-icon p-round" name="icon" color="success-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Euro
    </p-radio>

    <p-radio class="p-icon p-round" name="icon" color="info-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Dinar
    </p-radio>

    <p-radio class="p-icon p-round" name="icon" color="warning-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Pound
    </p-radio>

    <p-radio class="p-icon p-round" name="icon" color="danger-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Rupee
    </p-radio>

Animations

show code

HTML

Javascript

Python

PHP

Swift


    <p-radio class="p-icon p-curve p-tada" name="radio66" color="primary-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        HTML
    </p-radio>

    <p-radio class="p-icon p-curve p-rotate" name="radio66" color="success-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Javascript
    </p-radio>

    <p-radio class="p-icon p-curve p-pulse" name="radio66" color="info-o">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Python
    </p-radio>

    <p-radio class="p-icon p-curve p-jelly" name="radio66" color="warning">
        <i slot="extra" class="icon mdi mdi-check"></i>
        PHP
    </p-radio>

    <p-radio class="p-icon p-curve p-smooth" name="radio66">
        <i slot="extra" class="icon mdi mdi-check"></i>
        Swift
    </p-radio>

Plain

show code

Single

Married

In relationship


    <p-radio class="p-icon p-round p-plain p-smooth" name="plain" color="primary-o">
        <i slot="extra" class="icon mdi mdi-human"></i>
        Single
    </p-radio>

    <p-radio class="p-icon p-round p-plain p-smooth" name="plain" color="info-o">
        <i slot="extra" class="icon mdi mdi-human-male-female"></i>
        Married
    </p-radio>

    <p-radio class="p-icon p-round p-plain p-smooth" name="plain" color="success-o">
        <i slot="extra" class="icon mdi mdi-heart"></i>
        In relationship
    </p-radio>

Switch

show code

Summer

Winter

Fall


    <p-radio class="p-switch" name="switch1" color="success">Summer</p-radio>

    <p-radio class="p-switch p-fill" name="switch1" color="success">Winter</p-radio>

    <p-radio class="p-switch p-slim" name="switch1" color="success">Fall</p-radio>

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 fa-heart-o


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon fa fa-check"></i>
        fa-check
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon fa fa-close"></i>
        fa-close
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon fa fa-heart"></i>
        fa-heart
        <i slot="off-extra" class="icon fa fa-heart-o"></i>
        <label slot="off-label">fa-heart-o</label>
    </p-check>

Bootstrap Glyphicons

show code

glyphicon-ok

glyphicon-remove

glyphicon-heart info glyphicon-heart-empty


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon glyphicon glyphicon-ok"></i>
        glyphicon-ok
    </p-check>
    
    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon glyphicon glyphicon-remove"></i>
        glyphicon-remove
    </p-check>
    
    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon glyphicon glyphicon-heart info"></i>
        glyphicon-heart info
        <i slot="off-extra" class="icon glyphicon glyphicon-heart-empty"></i>
        <label slot="off-label">glyphicon-heart-empty</label>
    </p-check>

Material icon ( MDI )

show code

mdi-check

mdi-close

mdi-heart mdi-heart-o


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon mdi mdi-check"></i>
        mdi-check
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon mdi mdi-close"></i>
        mdi-close
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon mdi mdi-heart"></i>
        mdi-heart
        <i slot="off-extra" class="icon mdi mdi-heart-outline"></i>
        <label slot="off-label">mdi-heart-o</label>
    </p-check>

Material icon ( ZMDI )

show code

zmdi-check

zmdi-close

zmdi-favorite zmdi-favorite-outline


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon zmdi zmdi-check"></i>
        zmdi-check
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon zmdi zmdi-close"></i>
        zmdi-close
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon zmdi zmdi-favorite"></i>
        zmdi-favorite
        <i slot="off-extra" class="icon zmdi zmdi-favorite-outline"></i>
        <label slot="off-label">zmdi-favorite-outline</label>
    </p-check>

Typeicons

show code

typcn-tick

typcn-times

typcn-heart typcn-heart-outline


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon typcn typcn-tick"></i>
        typcn-tick
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon typcn typcn-times"></i>
        typcn-times
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon typcn typcn-heart"></i>
        typcn-heart
        <i slot="off-extra" class="icon typcn typcn-heart-outline"></i>
        <label slot="off-label">typcn-heart-outline</label>
    </p-check>

Ion icons

show code

ion-checkmark-round

ion-close-round

ion-ios-heart ion-ios-heart-outline


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon ion-checkmark-round"></i>
        ion-checkmark-round
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon ion-close-round"></i>
        ion-close-round
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon ion-ios-heart"></i>
        ion-ios-heart
        <i slot="off-extra" class="icon ion-ios-heart-outline"></i>
        <label slot="off-label">ion-ios-heart-outline</label>
    </p-check>

Material icon ( Google )

show code

done

clear

favorite favorite_border


    <p-check class="p-icon p-smooth" color="success">
        <i slot="extra" class="icon material-icons">done</i>
        done
    </p-check>

    <p-check class="p-icon p-smooth" color="danger-o">
        <i slot="extra" class="icon material-icons">clear</i>
        clear
    </p-check>

    <p-check class="p-icon p-plain" color="info-o" toggle>
        <i slot="extra" class="icon material-icons">favorite</i>
        favorite
        <i slot="off-extra" class="icon material-icons">favorite_border</i>
        <label slot="off-label">favorite_border</label>
    </p-check>

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


    <p-check class="p-svg">
        <span class="svg" uk-icon="icon: check"></span>
        check
    </p-check>

    <p-check class="p-svg p-round p-plain p-jelly" color="success">
        <span class="svg" uk-icon="icon: check"></span>
        check
    </p-check>

Feathers

show code

circle

square


    <!-- using direct svg file -->
    <p-check class="p-svg p-plain p-bigger p-smooth">
        <img slot="extra" class="svg" src="svg/feathers/check-circle.svg">
        circle
    </p-check>

    <!-- using data attribute -->
    <p-check class="p-svg p-plain p-bigger p-jelly">
        <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
        square
    </p-check>

But my instict says, other libraries also should work.

Scalability

Try changing font size

show code


    <div id="pretty-scale-test">
        <p-check></p-check>

        <p-check class="p-icon p-curve" color="danger">
            <i slot="extra" class="icon mdi mdi-close"></i>
        </p-check>

        <p-check class="p-round p-fill p-icon" color="info">
            <i slot="extra" class="icon mdi mdi-check"></i>
        </p-check>
    </div>

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

Playground

Try it online before integrate it into your project.

See the Pen Pretty checkbox Vue | Custom checkbox and radio buttons in pure css | Beautiful and nice looking | Components for Vue.js by Hamed Ehtesham (@H4M3D3) on CodePen.

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

pretty checkbox vue

Installation

Basic checkbox

Default

Curve

Round

Switch

iOS style

Colors

Solid

Mixed

Outline

Square & Fill

Square & Fill & Outline

Square & Thick

Square & Thick & Outline

Curve

Curve & Outline

Curve & Fill

Curve & Fill & Outline

Curve & Thick

Curve & Thick & Outline

Round

Round & Outline

Round & Fill

Round & Fill & Outline

Round & Thick

Round & Thick & Outline

Switch

Font icons

General

Svg

General

Image

General

Animations

Smooth

Jelly

Tada

Rotate

Pulse

Plain

General

Toggle

Simple

With icon

Without border

With color

Without label

States

Hover

Focus

Indeterminate

Disable

General

Lock

Lock

Size

Bigger

Radio buttons

Basic

Colors

Solid color and icons

Outline colors

Animations

Plain

Switch

Tested font icon libraries

Font awesome

Bootstrap Glyphicons

Material icon ( MDI )

Material icon ( ZMDI )

Typeicons

Ion icons

Material icon ( Google )

Tested SVG libraries

UIKit

Feathers

Scalability

Try changing font size