import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Checkbox from '../Checkbox';

<Meta title="Components/Checkbox" component={Checkbox} />

# Checkbox API

The API documentation of the Checkbox React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Checkbox } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Checkbox id="checkbox-usage" label="Label" checked readOnly />
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                              | Description                                                 |
| ----------------------------------------- | ----------------------------------------------------------- |
| .ods-checkbox\_\_root                     | Styles applied to the root element.                         |
| .ods-checkbox                             | Styles applied to the checkbox element.                     |
| .ods-checkbox\_\_checkmark                | Styles applied to the span element.                         |
| .ods-checkbox\_\_checkmark--indeterminate | Styles applied to the span element if indeterminate={true}. |
| .ods-checkbox\_\_label                    | Styles applied to the span element.                         |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Checkbox/Checkbox.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      label: 'Label',
      disabled: false,
      indeterminate: false,
      error: false,
    }}
    argTypes={{
      label: {
        control: 'text',
      },
      checked: {
        control: 'boolean',
      },
      disabled: {
        control: 'boolean',
      },
      indeterminate: {
        control: 'boolean',
      },
      error: {
        control: 'boolean',
      },
    }}
  >
    {(props) => <Checkbox id="checkbox-playground" {...props} />}
  </Story>
</Canvas>
