Checkbox and Radio Component For Vue.js

Checkbox and Radio Component For Vue.js

A vue.js component to create customizable, animated checkbox and radio inputs.

vue-checkbox-radio

A Vue component to easily styling checkbox and radio inputs.

Software License Latest Version on NPM npm

Example

demo

demo

Check out demo and styling examples.

Usage

Checkbox

<checkbox name="terms" value="1">
	I agree to the <a href="#">terms of service</a>
</checkbox>

Radio

<radio name="robot" value="1">
	I'm a robot
</radio>
<radio name="robot" value="0">
	I'm not a robot
</radio>

Install

yarn

yarn add vue-checkbox-radio

npm

npm install vue-checkbox-radio --save

Setup

Register the plugin.

import CheckboxRadio from 'vue-checkbox-radio';

Vue.use(CheckboxRadio);

Or register components manually.

import {Checkbox, Radio} from 'vue-checkbox-radio';

Vue.component('checkbox', Checkbox);
Vue.component('radio', Radio);

Params

Checkbox

Parameter Type Default
id string checkbox-id-(element uid)
class-name string null
name string null
v-model string, boolean or array undefined
value string or boolean null
checked boolean false
required boolean false
disabled boolean false

Radio

Parameter Type Default
id string radio-id-(element uid)
class-name string null
name string null
v-model string or boolean undefined
value string or boolean null
checked boolean false
required boolean false
disabled boolean false

Events

Both components emit the input event to work with v-model.

Full example

<checkbox
    id="input-terms"
    class-name="terms"
    name="terms"
    value="1"
    v-model="model"
    checked
    required>
    I agree to the <a href="#">terms of service</a>
</checkbox>

Slots

Slot input-box allow overwriting input-box for specific customizations.

<checkbox>
    <span class="input-box" slot="input-box">
        [...]
    </span>
    Test
</checkbox>

License

MIT © Mario Juárez

Github Repository

Tags: #VueJs