⭐️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 components: Checkbox
- Import to the app and add to the Vue (not recommended)
Vue
Alternatively if component used with server-side-rendering
Then import as follows below:
// assuming that you're one level higher than root folder where node modules is.Vue
In this case you will have to install stylus and stylus-loader to parse styles of component.
- Use it as component:
My 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:
ThisIsLabel
You can set custom color for background of checkbox:
ThisIsLabel
You can set size of the box and label font size in pixels:
ThisIsLabel
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 |