# @lightspeed/cirrus-checkbox

> Cirrus Checkbox Component

Latest version **6.0.3** (published 2019-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lightspeed/cirrus-checkbox
pnpm add @lightspeed/cirrus-checkbox
yarn add @lightspeed/cirrus-checkbox
bun add @lightspeed/cirrus-checkbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.3 |
| Published | 2019-02-26 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lightspeed |
| Maintainers | ahmedelgabri, anomen, inooid, kshahani, kurt.bergeron, lightspeedhq, ls-frederic-bouchard, ls-guillaume-lambert, tombertrand, x.drdak |

## Links

- npm: https://www.npmjs.com/package/@lightspeed/cirrus-checkbox
- npm.io page: https://npm.io/package/@lightspeed/cirrus-checkbox

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [@lightspeed/cirrus-icon](https://npm.io/package/@lightspeed/cirrus-icon.md) ^7.3.0
- [@lightspeed/cirrus-text](https://npm.io/package/@lightspeed/cirrus-text.md) ^4.0.0

## Recent versions

- 6.0.3 (latest) — 2019-02-26
- 7.0.0-beta.2 — 2018-12-07
- 7.0.0-beta.1 — 2018-12-03
- 7.0.0-beta.0 — 2018-12-03
- 7.0.0-alpha.2 — 2018-11-29
- 7.0.0-alpha.1 — 2018-11-27
- 7.0.0-alpha.0 — 2018-11-26
- 6.0.2 — 2018-10-30
- 6.0.1 — 2018-10-29
- 6.0.0 — 2018-10-15
- 5.0.3 — 2018-09-06
- 5.0.2 — 2018-08-28
- 5.0.1 — 2018-08-03
- 5.0.0 — 2018-07-26
- 4.0.0 — 2018-07-17
- … 20 more at https://npm.io/package/@lightspeed/cirrus-checkbox/versions

## README

# Checkbox
Checkbox component that supports the indeterminate state.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-checkbox
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-checkbox
```

## Usage
The use case of a checkbox is often confused with the one of a switch. The primary use case for a checkbox is when our user can select multiple values or to opt-in on something. The best and easiest way to remember if you should use a checkbox or a switch is by checking if the function is answering: 
Yes/No --> `<Checkbox>`
On/Off --> `<Switch>`.

**Never use a checkbox to turn something On/Off**

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-checkbox/Checkbox.scss';
```

### React Component

#### Props

| Prop            | Type                   | Description |
| --------------- | ---------------------- | ----------- |
| `id`            | `string`               | Checkbox's ID |
| `label`         | `string` or `element`  | Checkbox's label |
| `description`   | `string` or `element`  | Description's text |
| `disabled`      | `boolean`              | Set the Checkbox in a disabled state |
| `checked`       | `boolean`              | Use true for checked, false for unchecked, undefined or not set for indeterminate |
| `html property` | `string`               | Any extra properties passed will be added to the `<Checkbox>` tag |

#### Example

```js
import React from 'react';
import Checkbox from '@lightspeed/cirrus-checkbox';

const handleChange = (event) => {
  console.log(event.target.value);
}

const MyComponent = () =>
  <div>
    <Checkbox
      id="checkbox"
      name="checkbox"
      label="checkbox"
      data-attribute="custom attribute"
      checked={true}
      onChange={handleChange}
    />
  </div>;

export default MyComponent;
```

### CSS Component

Not available.

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