https://github.com/mariomka/vue-checkbox-radio

Checkbox and radio component for Vue.js
https://github.com/mariomka/vue-checkbox-radio

checkbox radio switcher vue

Last synced: about 2 months ago
JSON representation

Checkbox and radio component for Vue.js

• Host: GitHub
• URL: https://github.com/mariomka/vue-checkbox-radio
• Owner: mariomka
• License: mit
• Archived: true
• Created: 2017-05-23T07:38:51.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-05T14:57:08.000Z (almost 7 years ago)
• Last Synced: 2024-04-25T01:08:29.840Z (5 months ago)
• Topics: checkbox, radio, switcher, vue
• Language: Vue
• Homepage: https://mariomka.github.io/vue-checkbox-radio/
• Size: 416 KB
• Stars: 103
• Watchers: 9
• Forks: 23
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-checkbox-radio

> A Vue component to easily styling checkbox and radio inputs.

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)

[![Latest Version on NPM](https://img.shields.io/npm/v/vue-checkbox-radio.svg?style=flat-square)](https://npmjs.com/package/vue-checkbox-radio)

[![npm](https://img.shields.io/npm/dt/vue-checkbox-radio.svg?style=flat-square)](https://www.npmjs.com/package/vue-checkbox-radio)

## Example

[![demo](https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/master/docs/demo.gif)](http://mariomka.github.io/vue-checkbox-radio)

[![demo](https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/master/docs/demo-switcher.gif)](http://mariomka.github.io/vue-checkbox-radio)

Check out **[demo and styling examples](http://mariomka.github.io/vue-checkbox-radio)**.

## Usage

**Checkbox**

```html

	I agree to the terms of service

```

**Radio**

```html

	I'm a robot

	I'm not a robot

```

## Install

yarn

```bash

yarn add vue-checkbox-radio

```

npm

```bash

npm install vue-checkbox-radio --save

```

## Setup

Register the plugin.

```js

import CheckboxRadio from 'vue-checkbox-radio';

Vue.use(CheckboxRadio);

```

Or register components manually.

```js

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

```html

    I agree to the terms of service

```

## Slots

Slot ``input-box`` allow overwriting ``input-box`` for specific customizations.

```html

    

        [...]

    

    Test

```

## License

MIT © [Mario Juárez](https://github.com/mariomka)