@vx-components/checkbox v0.1.1

vx-checkbox

A VxCheckbox Component

Install

npm install --save @vx-components/checkbox

VxCheckbox API

props

• v-model Boolean (optional) default: false This Boolean property indicates that the control is selected by default, otherwise it is ignored. Use this directive to create two-way data bindings with the component. It indicates that the control is checked or not.

• value String (optional) The initial value of the control.

• id String (optional) Defines a unique identifier (ID) which must be unique in the whole document.

• label String (optional) The label of the control.

• name String (optional) The name of the control.

• label String (optional) The label associated with a control.

• autofocus Boolean (optional) This Boolean property lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.

• disabled Boolean (optional) default: false This Boolean property indicates that the user cannot interact with the control.

• title String (optional) Contains a text representing advisory information related to the element it belongs to. It's also use to display an error message when the input is invalid.

• required Boolean (optional) default: false This property specifies that the user must fill in a value before submitting a form.

• data-class-error String (optional) default: 'uk-form-danger'

events

• invalid Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form.

• input Fired when the checked value is changed.

• change Fired when a change to the initial element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

methods

• setError() Set a message error

• clearError() clear the message error

Usage

<template>
  <vx-checkbox v-model="checked"
    :value="value" :label="label" @input="onChange" />
</template>

<script>
  import VxCheckbox from '@vx-components/checkbox/vx.vue'
  
  export default {
    data: () => ({
      checked: true,
      value: 'agree',
      label: 'Recieve daily update'
    }),
    methods: {
      onChange (e) {
        // this.checked contains the new checkbox state
      }
    },
    components: { VxCheckbox }
  }
</script>

License

Under the MIT license. See LICENSE file for more details.