3.1.0 • Published 2 years ago

@odyzeo/form-checkbox v3.1.0

Weekly downloads
1
License
ISC
Repository
github
Last release
2 years ago

@odyzeo/form-checkbox

Simple input checkbox Vue.js component.

Demo

Installation

npm

npm install --save @odyzeo/form-checkbox

yarn

yarn add @odyzeo/form-checkbox

Import component in your where you want to use it and register it:

import FormCheckbox from '@odyzeo/form-checkbox';
export default {
  components: {
    FormCheckbox,
  },
}

Import styles or make your own.

import '@odyzeo/form-checkbox/dist/form-checkbox.css';

Usage

<template>
  <form-checkbox
    v-for="(checkbox, key) in checkboxes"
    :input="checkbox"
    :key="`${checkbox.name}-${checkbox.value}-${key}`"
    v-model="checkbox.value"
    :form-errors="formErrors[checkbox.name]"
  ></form-checkbox>
</template>
<script>
import FormCheckbox from '@odyzeo/form-checkbox'

export default {
    name: 'App',
    components: {
        FormCheckbox,
    },
    data() {
        return {
            formErrors: {},
            checkboxes: [
                {
                    name: 'checkbox_ios',
                    label: ' <strong>iOS</strong>',
                    value: true,
                    html: true,
                },
                {
                    name: 'checkbox_android',
                    label: 'Android',
                },
                {
                    name: 'checkbox_windows',
                    label: 'Windows',
                    value: false,
                },
                {
                    name: 'checkbox_ie',
                    label: 'IE',
                    value: false,
                    disabled: true,
                },
                {
                    name: 'checkbox_zeo',
                    label: 'Zeo',
                    value: true,
                    readonly: true,
                },
            ],
        };
    },
};
</script>

Props

input - required

Property nameTypeDefault valueDescription
namestringInput name attribute
labelstring''Label name for checkbox
htmlbooleanfalseDisplay label with v-html
disabledboolean | Add disabled attribute to input
readonlyboolean | Add readonly attribute to input

value {string} - optional

This is the initial value of the form checkbox.

trans {Function} - optional

Custom function to translate or modify input label.

trueValue {string} - optional

Value for checked checkbox. Default: yes.

falseValue {string} - optional

Value for unchecked checkbox. Default: null.

formErrors {array} - optional

Array of errors to display.

Events

Component emits 'input' event with value of the element

Slots

NameDescription
labelShow custom content

Development

npm run serve

or

yarn serve
3.0.3

2 years ago

3.0.2

2 years ago

3.1.0

2 years ago

3.0.1

3 years ago

3.0.0

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.5.1

5 years ago

1.5.0

6 years ago

1.4.2

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago