A Vue component to easily styling checkbox and radio inputs.
Check out demo and styling examples.
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>yarn
yarn add vue-checkbox-radionpm
npm install vue-checkbox-radio --saveRegister 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);| 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 |
| 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 |
Both components emit the input event to work with v-model.
<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>Slot input-box allow overwriting input-box for specific customizations.
<checkbox>
<span class="input-box" slot="input-box">
[...]
</span>
Test
</checkbox>MIT © Mario Juárez
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent