Vue material checkbox

Checkbox component for Vue

Version: 2.2.0 Updated: 10/01/2019

By: xrei License: MIT

Downloads Last 30 Days: 1.5k

⭐️Vue material checkbox⭐️

NPM version

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'

    Alternatively if component used with server-side-rendering

    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:

    <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
Categories: Vue js