Vue-material-checkbox NPM

Material design checkbox component for Vue

Demo ✅

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)

// inside vue SFC
import Checkbox from 'vue-material-checkbox'
export default {
  components: {Checkbox}
}

Import to the app and add to the Vue (not recommended)

import { globalCheckbox } from 'vue-material-checkbox'
Vue.use(globalCheckbox)

Alternatively if component used with server-side-rendering Then import as follows below:

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:

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

<Checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </Checkbox>

You can set custom color for background of checkbox:

<Checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </Checkbox>

You can set size of the box and label font size in pixels:

<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