⭐️Vue material checkbox⭐️

Material design checkbox component for Vue

Demo ✅

Here is demo with all features

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