# @shapla/vue-checkbox

> A custom checkbox for Vue 3 that exactly work same way as native checkbox

Latest version **1.0.0** (published 2021-05-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @shapla/vue-checkbox
pnpm add @shapla/vue-checkbox
yarn add @shapla/vue-checkbox
bun add @shapla/vue-checkbox
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-05-31 |
| First published | 2021-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 37.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sayful Islam |
| Maintainers | sayful |
| Keywords | vue, vue-component, checkbox |

## Links

- npm: https://www.npmjs.com/package/@shapla/vue-checkbox
- Repository: https://github.com/sayful1/shapla-vue-components
- Homepage: https://github.com/sayful1/shapla-vue-components#readme
- Issues: https://github.com/sayful1/shapla-vue-components/issues
- npm.io page: https://npm.io/package/@shapla/vue-checkbox

## Dependencies (1)

- [shapla-css](https://npm.io/package/shapla-css.md) ^2.0

## Recent versions

- 1.0.0 (latest) — 2021-05-31

## README

# Shapla Checkbox

A custom checkbox for Vue 3 that exactly work same way as native checkbox

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-checkbox
```

# Usage
### Styles

with SCSS:

```js
import '@shapla/vue-checkbox/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-checkbox/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaCheckbox from '@shapla/vue-checkbox';

export default {
  name: 'Hello',

  components: {
    ShaplaCheckbox
  },

  data(){
    return {
  	    singleCheckbox:false
  	}
  }
}

```

```html
<shapla-checkbox v-model="singleCheckbox">Label goes here.</shapla-checkbox>
```

### Props
| Property      | Type      | Required  | Default     | Description
|---------------|-----------|-----------|-------------|-----------------------------------------------------------
| `label`       | String    | **no**    | ``          | Checkbox label
| `value`       | String    | **no**    | `on`        | The default value for the checkbox
| `trueValue`   | String    | **no**    | `true`      | The value when user checked the checkbox
| `falseValue`  | String    | **no**    | `false`     | The value when user unchecked the checkbox
| `disabled`    | Boolean   | **no**    | `false`     | If set `true`, Checkbox will be disabled to check.
| `checked`     | Boolean   | **no**    | `undefined` | If set `true`, Checkbox will be checked.

---
_Source: https://npm.io/package/@shapla/vue-checkbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._