<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `yarn generate-readme` script. -->

# CheckboxInput

## Description

An input component that works as checkbox input.

## Installation

```
yarn add @commercetools-uikit/checkbox-input
```

```
npm --save install @commercetools-uikit/checkbox-input
```

Additionally install the peer dependencies (if not present)

```
yarn add react
```

```
npm --save install react
```

## Usage

```jsx
import CheckboxInput from '@commercetools-uikit/checkbox-input';

const Example = () => (
  <div>
    <CheckboxInput
      value="foo-radio-value"
      onChange={(event) => alert(event.target.value)}
      isChecked={true}
    >
      A pre-checked option
    </CheckboxInput>
    <CheckboxInput
      value="bar-radio-value"
      onChange={(event) => alert(event.target.value)}
      isDisabled={true}
    >
      A disabled option
    </CheckboxInput>
    <CheckboxInput
      value="unknown-radio-value"
      onChange={(event) => alert(event.target.value)}
      aria-label={'An Option Without a Visible Label'}
    />
  </div>
);

export default Example;
```

## Properties

| Props             | Type                 | Required | Default | Description                                                                                                                                                                                                                                                                                                                 |
| ----------------- | -------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`              | `string`             |          |         | Used as HTML id attribute. An id is auto-generated when it is not specified.                                                                                                                                                                                                                                                |
| `name`            | `string`             |          |         | Used as HTML name attribute of the input component                                                                                                                                                                                                                                                                          |
| `value`           | `string`             |          |         | Value of the input component.                                                                                                                                                                                                                                                                                               |
| `isChecked`       | `boolean`            |          | `false` | The checked property sets the checked state of the checkbox.                                                                                                                                                                                                                                                                |
| `isIndeterminate` | `boolean`            |          |         | If `true`, this state is shown as a dash in the checkbox, and indicates that its state is neither checked nor unchecked.&#xA;This is most often used when the checkbox is tied to a collection of items in mixed states (E.g nested checkboxes).&#xA;This takes precedence visually in case `isChecked` is marked as `true` |
| `onChange`        | `ChangeEventHandler` |    ✅    |         | Will be triggered whenever an `CheckboxInput` is clicked. Called with `event`                                                                                                                                                                                                                                               |
| `isHovered`       | `boolean`            |          |         | Forces CheckboxInput to be rendered in a hovered state.&#xA;Needed for cases when hovered appearance should be triggered by the parent component and not the CheckboxInput itself.&#xA;CheckboxInput is capable of handling it's own hovering without the need to pass this prop.                                           |
| `isDisabled`      | `boolean`            |          | `false` | Disables the CheckboxInput                                                                                                                                                                                                                                                                                                  |
| `isReadOnly`      | `boolean`            |          |         | Makes the CheckboxInput readonly                                                                                                                                                                                                                                                                                            |
| `hasError`        | `boolean`            |          | `false` | Indicates that the checkbox has an error                                                                                                                                                                                                                                                                                    |
| `children`        | `ReactNode`          |          |         | The descriptive text of the CheckboxInput, used as its label.                                                                                                                                                                                                                                                               |

## `data-*` and `aria-*` props

The component further forwards all `data-` and `aria-` attributes to the underlying component.
In order to keep the component more accessible to screen-readers, please make sure that if no `children` prop is present (for displaying a checkbox without any text), a corresponding `aria-label` property is provided instead.