<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-CHECKBOX/INDEX.JS INSTEAD.
-->
# Checkbox

Checkbox is implemented as a "controlled input", meaning it is a direct representation of the model data passed
inside. User interaction will bubble changes in the form of `onChecked` and `onUnchecked` that a controller
view must intercept and apply against the data provider.

## Installation

```bash
npm i boundless-checkbox --save
```

Then use it like:


```jsx
/** @jsx createElement */

import { createElement, PureComponent } from 'react';
import Checkbox from 'boundless-checkbox';

export default class CheckboxDemo extends PureComponent {
    state = {
        checkboxes: [ {
            checked: false,
            indeterminate: false,
            label: 'An unchecked checkbox',
            name: 'box1',
        }, {
            checked: true,
            indeterminate: false,
            label: 'A checked checkbox',
            name: 'box2',
        }, {
            checked: false,
            indeterminate: true,
            label: 'An indeterminate (mixed) checkbox',
            name: 'box3',
        } ],
    }

    handleInteraction(event) {
        // eslint-disable-next-line no-alert
        alert(`${event.target.name} ${event.target.checked ? 'checked' : 'unchecked'}!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`);
    }

    render() {
        return (
            <div className='spread'>
                {this.state.checkboxes.map((definition) => {
                    return (
                        <Checkbox
                            key={definition.name}
                            inputProps={definition}
                            label={definition.label}
                            onChange={this.handleInteraction} />
                    );
                })}
            </div>
        );
    }
}
```


Checkbox can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components:

```bash
npm i boundless --save
```

the ES6 `import` statement then becomes like:

```js
import { Checkbox } from 'boundless';
```


## Props

> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Checkbox).

### Required Props

There are no required props.


### Optional Props

- __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`component`__ &middot; any valid HTML tag name

  Expects | Default Value
  ---     | ---
  `string` | `'div'`

- __`inputProps`__ &middot; all input-specific props like `value`, `name`, etc should be passed here -- common ones are listed below

  Expects | Default Value
  ---     | ---
  `object` | `{ checked: false, indeterminate: false }`

- __`label`__ &middot; any React-renderable content, most commonly a simple string

  Expects | Default Value
  ---     | ---
  `any renderable` | `null`

- __`labelProps`__

  Expects | Default Value
  ---     | ---
  `object` | `{}`

- __`onChecked`__ &middot; called when the element becomes checked; backing data must be updated to persist the state change

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`

- __`onUnchecked`__ &middot; called when the element becomes unchecked; backing data must be updated to persist the state change

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`


## Reference Styles
### Stylus
You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl).

```stylus
// Redefine any variables as desired, e.g:
color-accent = royalblue

// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-checkbox/style"
```

### CSS
If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).