Skip to content
Quickly integrate pretty checkbox components with Vue.js
Branch: master
Clone or download
Hamed v1.1.9
Latest commit 67d64d8 Aug 12, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
src - fix: distinguish checkbox from radio (#11) Aug 12, 2018
.gitignore version 1 (100% coverage) Jan 2, 2018
LICENSE Initial commit Dec 25, 2017 - update description Feb 20, 2018
banner.png update logo Dec 28, 2017
logo.png update logo Dec 28, 2017
package.json v1.1.9 Aug 12, 2018
webpack.config.js - update webpack and related stuff Jan 11, 2018
yarn.lock - update template banner plugin Jan 11, 2018

Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js

Github Release Licence


npm i --save-dev pretty-checkbox-vue


Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
<script type="text/javascript">


import PrettyCheckbox from 'pretty-checkbox-vue';



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


Once installed, it can be used in a template as simply as:

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

<!-- Or it can be used just like input -->

<p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
<p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>


Property Type Default Value
type String checkbox (checkbox & input) or radio (radio)
name String
value Any
class String p-default (checkbox & input) or p-default p-round (radio)
true-value Boolean or String true
false-value Boolean or String false
checked Boolean false
disabled Boolean false
required Boolean false
indeterminate Boolean false
color String
off-color String
hover-color String
indeterminate-color String
toggle Boolean false
hover Boolean false
focus Boolean false


Name Purpose
default (no name) include label in default mode or for "on" state in toggle mode
extra include icon or svg or image in default mode or for "on" state in toggle mode
off-label include label for "off" state in toggle mode
off-extra include icon or svg or image for "off" state in toggle mode
hover-label include label in hover state
hover-extra include icon or svg or image in hover state
indeterminate-label include label in indeterminate state
indeterminate-extra include icon or svg or image in indeterminate state

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.


Released under The MIT License. Copyright (c) hamed-ehtesham.

You can’t perform that action at this time.