# vue-material-checkbox

> Checkbox component for Vue

Latest version **2.2.0** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

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

## 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 | 2.2.0 |
| Published | 2019-10-01 |
| First published | 2017-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 156.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15 |
| Author | rei |
| Maintainers | romanrei |
| Keywords | material, checkbox, vue |

## Links

- npm: https://www.npmjs.com/package/vue-material-checkbox
- Repository: https://github.com/xrei/vue-material-checkbox
- Homepage: https://github.com/xrei/vue-material-checkbox#readme
- Issues: https://github.com/xrei/vue-material-checkbox/issues
- npm.io page: https://npm.io/package/vue-material-checkbox

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.10

## Recent versions

- 2.2.0 (latest) — 2019-10-01
- 2.0.0-beta.0 (beta) — 2019-06-27
- 2.1.0 — 2019-07-02
- 2.0.1 — 2019-07-02
- 2.0.0 — 2019-07-02
- 1.2.1 — 2018-10-31
- 1.2.0 — 2018-10-31
- 1.1.3 — 2018-10-31
- 1.1.2 — 2018-05-03
- 1.1.1 — 2018-05-03
- 1.1.0 — 2018-05-03
- 1.0.5 — 2018-03-27
- 1.0.4 — 2018-03-26
- 1.0.3 — 2018-02-23
- 1.0.2 — 2018-02-18
- … 13 more at https://npm.io/package/vue-material-checkbox/versions

## README

<h1 align="center">⭐️Vue material checkbox⭐️</h1>

<p align="center">
<a href="https://www.npmjs.com/package/vue-material-checkbox">
<img src="https://img.shields.io/npm/v/vue-material-checkbox.svg" alt="NPM version">
</a>
</p>

#### Material design checkbox component for Vue

# Demo ✅
[Here is demo with all features](https://xrei.github.io/vue-material-checkbox/)

## Breaking changes from v1
Rename plugin default name from `checkbox` to `Checkbox`

# Use ❓
### With npm
- Install plugin
```
npm install vue-material-checkbox --save
```
- Import to the component (recommended way)
```javascript
// inside vue SFC
import Checkbox from 'vue-material-checkbox'
export default {
  components: {Checkbox}
}
```
- Import to the app and add to the Vue (not recommended)
```javascript
import { globalCheckbox } from 'vue-material-checkbox'
Vue.use(globalCheckbox)
```
Alternatively if component used with server-side-rendering
<br>
Then import as follows below:
```javascript
import { globalCheckbox } from '../node_modules/vue-material-checkbox/src/main'
// assuming  that you're one level higher than root folder where node modules is.
Vue.use(globalCheckbox)
```
In this case you will **have** to install *stylus* and *stylus-loader*  to parse styles of component.

- Use it as component:
```html
<Checkbox id="mycheck1" v-model="someVar" :value="42">My Checkbox</Checkbox>
```

This component must be used with `v-model` to work properly.
But you can pass any value to `:value` and get it from event `change` from second argument.

# Component 💎
There is autogenerated id for label and checkbox, but you can specify it yourself.

You can specify label for checkbox inside checkbox tag:
```html
<Checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </Checkbox>
```

You can set custom color for background of checkbox:
```html
<Checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </Checkbox>
```

You can set size of the box and label font size in pixels:
```html
<Checkbox id="mycheck1" v-model="someVar" :size="32" fontSize="24"> ThisIsLabel </Checkbox>
```

## Complete props table

| Prop | Type | Default | What For|
|:-:|:-:|:-:|---|
| `id` | `String` | `undefined` | **Recommended**. input id associated with label |
| `model` | `Boolean or Array` | `undefined` | Value for `v-model` |
| `value` | `any` | `undefined` | Value for input, without it checkbox works as `true/false` |
| `color` | `String` | `undefined` | Pass the color string to change bg-color of checkbox |
| `checked` | `Boolean` | `false` | is checked by default? |
| `name` | `String` | `undefined` | Name for input |
| `required` | `Boolean` | `false` | HTML required attr |
| `disabled` | `Boolean` | `false` | HTML disabled attr |
| `size` | `Number` | `undefined` | Size of the box in px |
| `fontSize` | `Number` | `undefined` | Size of the label font in px |

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