mariomka / vue-checkbox-radio

Checkbox and radio component for Vue.js

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" 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

vue-checkbox-radio's Issues

Possibility to get checked value/values of radio and checkbox components

Hi, @mariomka , could you add possibility of getting checked value(radio) and checked values(checkbox) through emit on change them with event or another possible way?
Smth like here http://vuejs.org/v2/guide/forms.html#Checkbox
Thanks.

2 sets of radio buttons doesn't work.

I have two sets of radio buttons, only 1 of the sets work. The other set just don't seem to be responding when ticking their boxes but the binding of the model works somehow.

event change

May be you can add change event ? Because sometimes you need do anything else.

Some future requests

Thank you for this nice component! Very simple and useful.
But during working with it, I've found some things I'd like to see later:

1. Please, add slot supporting to the '.input-box' element.
   For example, to include svg icon via 'use x-link'.
2. Sometimes we need to add a custom class name to the '.checkbox-component' element (parent tag), not only to the nested 'input'.
   Thanks again!

Input focus event

I miss the @focus="$emit('focus', name)" on the input element.
So i can target the @Focus event on the custom component.

Allow boolean values

Using boolean values in radios currently yields a warning "Expected String, got Boolean".

It does work, but I think it'd be nice if the warning would be gone.

Use case: Building a switch with two radios.

<radio :value="true" v-model="doThing" checked>Do the thing</radio>
<radio :value="false" v-model="doThing">Don't do the thing</radio>

(Yes, one could do this with a checkbox that's checked/unchecked, but that's not always practical depending on the labels used or when one wants the user to make a conscious decision to click something).

Nested checkbox

I put the checkbox component inside another component and i try to do a v-model on the last one but when i do, the value is always going to be the last checkbox checked even if i make my property an array.

in the other component:

<checkbox ref="checkbox" @input="updateInput()" :value="id"></checkbox>
...
updateInput () {
  let val = this.$refs.checkbox.value
  this.$emit('input', val)
}

And in my other file who calls the component:

<my-component v-model="checkboxValues.items" id="24"/>
...
checkboxValue: {
  items: []
}

Radio groups: how can I know which of the radios was selected?

I have something like this:

And this code:

<radio name="deal-type" @input="changeDealType(checked)">
    {{ dealType.description }}
</radio>

Is there any way I can tell which of the radios on my radio group was checked? For all I can tell the @input emitted event only allows me to bring checked/unchecked status for this particular radio button, but I can't tell apart which one was clicked.

When we do not specify value attribute, an empty string is sent to a server

When we use a plain checkbox element, we do not need to explicitly provide a value attribute. When checkbox is checked, a "on" value is sent to the server on form submit.

For this component, the value attribute must be specified, otherwise internally the component provides its <input type="checkbox"> with an empty value attribute. And therefore, when checkbox is checked, an empty value is sent to a server on form submit.

I spent a lot of time figuring out what's wrong.

I think that if no value specified for the component from outside, the component shouldn't add the value attribute to the internal <input type="checkbox"> element at all. In this case, browser will sent "on" to the server natively.

How to style checkbox and radio from outside

Here: https://mariomka.github.io/vue-checkbox-radio/ you are giving examples of how to style checkbox and radio components, but when I try to do that, my style is overridden by internal component style and thus does not have any effect.

How to solve or workaround this?

why not use '==' in the return code in state()？

vue-checkbox-radio/src/components/Radio.vue

            state() {
                if (this.modelValue === undefined) {
                    return this.checked;
                }
                return this.modelValue === this.value;
            }
        },

In my project, the modelValue sometimes is INT type, and here the state() will return false :(

so, why not use '==' in the return code in state()？

checkbox doesn't work

{{option.textvalue}}

			<template v-else>
				<checkbox 
				:name="item.name"
				:value="option.value"
				v-model="item.value"
				>
				   {{option.textvalue}}
				</checkbox>
			</template>
			</label>
		</div>