import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Checkbox } from "./Checkbox";
import * as CheckboxStories from "./Checkbox.stories";

<Meta of={CheckboxStories} />

# Checkbox

Checkbox allows a user to select one or more options from a list.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Checkbox } from "@simplybusiness/mobius";
```

## Examples

### Default

For this component to appear selected use `defaultSelected` boolean prop.

This will allow user to change the value.

<Canvas of={CheckboxStories.Default} />

### Disabled

<Canvas of={CheckboxStories.Disabled} />

### Valid

<Canvas of={CheckboxStories.Valid} />

### Invalid

<Canvas of={CheckboxStories.Invalid} />

### Long label

<Canvas of={CheckboxStories.LongLabel} />

## Accessibility

When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the checkbox is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.

## Events

The `onChange` prop can be used to listen to changes of the selected state of the checkbox. See the prop table for the complete list of events supported.

## Props

<ArgTypes
  of={Checkbox}
  exclude={["groupDisabled", "selected", "setSelected"]}
/>

## Component HTML Structure and Class names

The following example HTML is rendered for a Checkbox:

```html
<label class="mobius-checkbox --is-invalid --is-optional">
  <input
    class="mobius-checkbox__input --is-invalid --is-optional"
    type="checkbox"
    value="agree"
  />
  <span class="mobius-checkbox__label">I agree</span>
</label>
<div class="mobius-error-message">
  <span class="mobius-error-message__icon"></span>
  <span class="mobius-error-message__text">This is an error message</span>
</div>
```

Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-selected
- \--is-valid
- \--is-invalid
- \--is-required
- \--is-optional
