# pretty-checkbox-vue

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

Latest version **1.1.9** (published 2018-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install pretty-checkbox-vue
pnpm add pretty-checkbox-vue
yarn add pretty-checkbox-vue
bun add pretty-checkbox-vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2018-08-12 |
| First published | 2017-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 256 |
| Author | Hamed Ehtesham |
| Maintainers | hamed-ehtesham |
| Keywords | Pretty, Radio, Switch, Button, Pretty Checkbox, pretty-checkbox, Components, Vue, VueJS, Vue2, WebComponents, CSS, Input, Checkbox |

## Links

- npm: https://www.npmjs.com/package/pretty-checkbox-vue
- Repository: https://github.com/hamed-ehtesham/pretty-checkbox-vue
- Homepage: https://hamed-ehtesham.github.io/pretty-checkbox-vue/
- Issues: https://github.com/hamed-ehtesham/pretty-checkbox-vue/issues
- npm.io page: https://npm.io/package/pretty-checkbox-vue

## Dependencies (1)

- [pretty-checkbox](https://npm.io/package/pretty-checkbox.md) ^3.0.3

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.9 (latest) — 2018-08-12
- 1.1.8 — 2018-02-20
- 1.1.7 — 2018-02-20
- 1.1.6 — 2018-02-14
- 1.1.5 — 2018-02-01
- 1.1.4 — 2018-02-01
- 1.1.2 — 2018-01-05
- 1.1.1 — 2018-01-05
- 1.1.0 — 2018-01-05
- 1.0.2 — 2018-01-03
- 1.0.1 — 2018-01-03
- 1.0.0 — 2018-01-02
- 0.0.3 — 2017-12-27
- 0.0.2 — 2017-12-27
- 0.0.1 — 2017-12-27

## README

<p align="center">
<a href="https://hamed-ehtesham.github.io/pretty-checkbox-vue/">
    <img src="https://raw.githubusercontent.com/hamed-ehtesham/pretty-checkbox-vue/master/banner.png" width="300px">
</a>

<br>
Quickly integrate <a href="https://lokesh-coder.github.io/pretty-checkbox/">pretty checkbox</a> Components (checkbox, switch, radio button) with <a href="https://vuejs.org">Vue.js</a>
<br>
<br>

<a href="https://lokesh-coder.github.io/pretty-checkbox/">
    <img alt="" src="https://img.shields.io/badge/%20pretty--checkbox-3.x-green.svg?style=flat-square&colorA=8033b0&colorB=75b7dd">
</a>
<a href="https://vuejs.org">
    <img alt="" src="https://img.shields.io/badge/vue.js-^2.2.0-green.svg?style=flat-square&colorA=35495e&colorB=41b883">
</a>

<br>

<a href="https://github.com/hamed-ehtesham/pretty-checkbox-vue/releases">
    <img src="https://img.shields.io/github/release/hamed-ehtesham/pretty-checkbox-vue.svg?style=flat-square&colorB=75b7dd" alt="Github Release">
</a>
<a href="https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE">
    <img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorB=41b883" alt="Licence">
</a>
<a href="https://www.npmjs.com/package/pretty-checkbox-vue">
    <img alt="" src="https://img.shields.io/npm/dt/pretty-checkbox-vue.svg?style=flat-square">
</a>
<a href="https://www.npmjs.com/package/pretty-checkbox-vue">
    <img alt="" src="https://img.shields.io/npm/dm/pretty-checkbox-vue.svg?style=flat-square">
</a>

</p>

<div class="highlight highlight-source-shell">
<pre>
<div align="center"><strong>Demo and documentation</strong></div>
<div align="center"><a align="center" href="https://hamed-ehtesham.github.io/pretty-checkbox-vue/">https://hamed-ehtesham.github.io/pretty-checkbox-vue/</a></div>
</pre>
</div>

## Installation

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

### Browser

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

```html
<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

```js
import PrettyCheckbox from 'pretty-checkbox-vue';

Vue.use(PrettyCheckbox);
```

Or

```js
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:

```html
<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](https://github.com/hamed-ehtesham/pretty-checkbox-vue/issues) on Github.

# License
Released under The MIT [License](https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE). Copyright (c) hamed-ehtesham.

---
_Source: https://npm.io/package/pretty-checkbox-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._