vcr

vue-checkbox-radio

Checkbox and radio component for Vue.js

Showing:

Popularity

Downloads/wk

1.1K

GitHub Stars

105

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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

ParameterTypeDefault
idstringcheckbox-id-(element uid)
class-namestringnull
namestringnull
v-modelstring, boolean or arrayundefined
valuestring or booleannull
checkedbooleanfalse
requiredbooleanfalse
disabledbooleanfalse

Radio

ParameterTypeDefault
idstringradio-id-(element uid)
class-namestringnull
namestringnull
v-modelstring or booleanundefined
valuestring or booleannull
checkedbooleanfalse
requiredbooleanfalse
disabledbooleanfalse

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial