pretty-checkbox-vue

Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js
211,468 256
Install
npm install pretty-checkbox-vue
Latest Version:1.1.9
Vue:2
License:MIT
Last Updated:Dec 6, 2022
Links: GitHub  ·  npm
Maintainer: hamed-ehtesham

Installation

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

Browser

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">
  Vue.use(PrettyCheckbox);
</script>

Module

import PrettyCheckbox from 'pretty-checkbox-vue';

Vue.use(PrettyCheckbox);

Or

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

Usage

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>

Properties

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

Slots

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.

License

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

Related Packages

vue-button-animation

Animated Buttons for Vue.js

1,150 2
@vgaidadei/inputv

Custom inputs form by vue.js applications

250
shards-vue

A free, beautiful and modern Vue.js UI kit based on the Shards UI kit.

17,219 390
shards-vue3

A free, beautiful and modern Vue.js 3 UI kit based on the Shards UI kit.

2,948 1
vue-checkbox-radio

Checkbox and radio component for Vue.js

32,732 97

Version History

Version Released License
1.1.9 MIT
1.1.8 MIT
1.1.7 MIT
1.1.6 MIT
1.1.5 MIT