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

<Meta of={CheckboxGroupStories} />

# Checkbox

CheckboxGroup allows a user to select one or more options from a list of checkboxes.

## Install

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

## Usage

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

## Examples

### Default

For one or more checkboxes to appear selected use `value` prop which expects an array.

For example, `<CheckboxGroup defaultValue={['option1', 'option3']}>`

This will allow user to change the value.

<Canvas of={CheckboxGroupStories.Default} />

### Horizontal

<Canvas of={CheckboxGroupStories.Horizontal} />

### Disabled

<Canvas of={CheckboxGroupStories.Disabled} />

### Valid

<Canvas of={CheckboxGroupStories.Valid} />

### Invalid

<Canvas of={CheckboxGroupStories.Invalid} />

## 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. For example:

```jsx
<CheckboxGroup aria-label="Checkbox Group">
  <Checkbox label="Option 1" value="option1" />
  <Checkbox label="Option 2" value="option2" />
  <Checkbox label="Option 3" value="option3" />
</CheckboxGroup>
```

## 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={CheckboxGroup} />

## Component HTML Structure and Class names

The following example HTML is rendered for a CheckboxGroup:

```html
<div
  role="group"
  aria-labelledby=":r5q:"
  class="mobius-checkbox-group --is-vertical --is-optional"
>
  <span id=":r5q:" class="mobius-label">Value</span>
  <div class="mobius-checkbox-group__wrapper">
    <label id=":r5t:" class="mobius-checkbox --is-selected --is-optional">
      <input
        aria-disabled="false"
        aria-invalid="false"
        aria-required="false"
        class="mobius-checkbox__input --is-selected --is-optional"
        type="checkbox"
        id=":r5r:"
        value="option1"
        checked=""
      />
      <span class="mobius-checkbox__label">Option 1</span>
    </label>
    <label id=":r60:" class="mobius-checkbox --is-optional">
      <input
        aria-disabled="false"
        aria-invalid="false"
        aria-required="false"
        class="mobius-checkbox__input --is-optional"
        type="checkbox"
        id=":r5u:"
        value="option2"
      />
      <span class="mobius-checkbox__label">Option 2</span>
    </label>
    <label id=":r63:" class="mobius-checkbox --is-selected --is-optional">
      <input
        aria-disabled="false"
        aria-invalid="false"
        aria-required="false"
        class="mobius-checkbox__input --is-selected --is-optional"
        type="checkbox"
        id=":r61:"
        value="option3"
        checked=""
      />
      <span class="mobius-checkbox__label">Option 3</span>
    </label>
  </div>
</div>
```

Class names are augmented with the following flags if true:

- \--is-horizontal
- \--is-vertical
- \--is-required
- \--is-optional
