@maqe-vue/checkbox-input

The Vue2 component for checkbox-input

See demo on: Storybook

---

Installation

NPM

Install the npm package.

npm install @maqe-vue/checkbox-input --save

Register the component

import VmqCheckbox from '@maqe-vue/checkbox-input'
import '@maqe-vue/checkbox-input/dist/style.css'

Vue.component('vmq-checkbox', VmqCheckbox)

---

Usage

Basic

<vmq-checkbox
    v-model="checkbox"
    label="Label"
/>

Multiple

<vmq-checkbox
    v-for="({ id, title }) in fruits"
    v-model="input"
    :label="title"
    :vmq-value="id"
    :key="id"
/>
data() {
    return {
        fruits: [
            { id: 1, title: "Bannan" },
            { id: 2, title: "Orange" },
            { id: 3, title: "Apple" },
        ],
        input: [1, 2]
    };
}

---

API

Props

Name	Type	Description	default
v-model	bind
labele	string
disabled	boolean		false
containerClass	string

Event

Name	Type	Description	default
change(value, event)	function	Invoked when input changes

Style

Custom Style

Custom style with css variable

<vmq-checkbox
    v-model="checkbox"
    label="Label"
/>

// for example to set as a global
<style>
    :root {
        --vmq-checkbox-color: tan;
        --vmq-checkbox-label-color: black;
    }
</style>