vue-checkbox-radio

A Vue component to easily styling checkbox and radio inputs.

Example

Check out demo and styling examples.

Usage

Checkbox

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

Radio

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

Install

yarn

yarn add vue-checkbox-radio

npm

npm install vue-checkbox-radio --save

Setup

import CheckboxRadio from 'vue-checkbox-radio';

app.use(CheckboxRadio);

Or register components manually.

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

app.component('checkbox', Checkbox);
app.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`
model-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`
model-value	`string` or `boolean`	`null`
checked	`boolean`	`false`
required	`boolean`	`false`
disabled	`boolean`	`false`

Events

Both components emit the update:modelValue 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>

Inventory-Shield/vue-checkbox-radio