# 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.