import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import * as Stories from './examples';

<Meta title="Components|CheckBox" />

# CheckBox

This is a controlled component that requires an `onValueChange` callback that
updates the value prop in order for the component to reflect user actions. If
the `value` prop is not updated, the component will continue to render the
supplied `value` prop instead of the expected result of any user actions.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| ...ViewProps              | | |
| color                     | ?Color    | '#AAB8C2' |
| disabled                  | ?boolean  | false |
| onChange                  | ?Function | |
| onValueChange             | ?Function | |
| value                     | ?boolean  | false |

### color

Customize the color of the active checkbox.

<Preview withSource='none'>
  <Story name="color">
    <Stories.color />
  </Story>
</Preview>

### disabled

Prevent interaction with the checkbox.

<Preview withSource='none'>
  <Story name="disabled">
    <Stories.disabled />
  </Story>
</Preview>

### onValueChange

Called with the event when the value changes.

<Preview withSource='none'>
  <Story name="onValueChange">
    <Stories.onValueChange />
  </Story>
</Preview>

### value

Controls whether the checkbox is active or not.

<Preview withSource='none'>
  <Story name="value">
    <Stories.value />
  </Story>
</Preview>

## Notes

The checkbox size can be controlled by changing the `height` and `width` style
properties.

<Preview withSource='none'>
  <Story name="customSize">
    <Stories.customSize />
  </Story>
</Preview>
