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

Register the plugin.

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>

License

MIT © Mario Juárez