# @chantelle/checkbox

> The Checkbox component of the Chantelle Pattern Library

Latest version **0.3.3** (published 2018-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chantelle/checkbox
pnpm add @chantelle/checkbox
yarn add @chantelle/checkbox
bun add @chantelle/checkbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2018-04-26 |
| First published | 2018-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Chantelle Lingerie GmbH |
| Maintainers | blackakula, chkmrv, ctsd, gabrielizaias, jacopkane, krasnovyehor |

## Links

- npm: https://www.npmjs.com/package/@chantelle/checkbox
- Repository: git@bitbucket.org:editionlingerie/pattern-library
- npm.io page: https://npm.io/package/@chantelle/checkbox

## Recent versions

- 0.3.3 (latest) — 2018-04-26
- 0.3.2 — 2018-04-25
- 0.3.1 — 2018-04-19
- 0.3.0 — 2018-04-19

## README

# Checkbox

## Installation

```bash
yarn add @chantelle/checkbox
```

## Usage

First, include the CSS in your HTML:

```html
<link rel="stylesheet" href="node_modules/@chantelle/checkbox/dist/styles.css">
```

> Note: you can import the CSS directly into your project if your bundler supports it:

```js
 import '@chantelle/checkbox/dist/styles.css';
```

### React Component

```jsx
import Button from '@chantelle/checkbox';

ReactDOM.render(
   <Checkbox
        id='basic_checkbox'
        name='test_name'
        labelText='Basic checkbox'
        labelClass='custom-Label-Checkbox'
        className='custom-Checkbox'
        isChecked={checked}
        isDisabled={false}
        onChange={this.handleChange.bind(this)} />,
  container
);
```

### CSS API

To use the Checkbox component, add the `.pl-checkbox` to the `<Checkbox>` element to apply the styles.

```html
    <input
      type='checkbox'
      class='pl-checkbox'
      checked='checked'>
        <label for='my_checkbox'>my_checkbox</label>
  </input>
```

#### State

Checkbox with `disabled` attribute already apply the disabled styles. The `.pl-checkbox--disabled` class is reserved for links that have the `.pl-checkbox` class.

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