vmc

vue-material-checkbox

Lightweight material design checkbox component for Vue

Showing:

Popularity

Downloads/wk

76

GitHub Stars

15

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Checkbox

Readme

⭐️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'
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

PropTypeDefaultWhat For
idStringundefinedRecommended. input id associated with label
modelBoolean or ArrayundefinedValue for v-model
valueanyundefinedValue for input, without it checkbox works as true/false
colorStringundefinedPass the color string to change bg-color of checkbox
checkedBooleanfalseis checked by default?
nameStringundefinedName for input
requiredBooleanfalseHTML required attr
disabledBooleanfalseHTML disabled attr
sizeNumberundefinedSize of the box in px
fontSizeNumberundefinedSize of the label font in px

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial