import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Checkbox from './';
import ListItem from '../List/ListItem';

<Meta title="Data Entry|Checkbox" component={Checkbox} />

# Checkbox

<Preview>
  <Story name="Index">
    <Checkbox value="checkbox">Checkbox</Checkbox>
  </Story>
</Preview>

### Grouped Checkbox

<Preview>
  <Story name="Grouped Checkbox">
    <Checkbox.Group>
      <Checkbox value="apple">Apple</Checkbox>
      <Checkbox value="banana">Banana</Checkbox>
      <Checkbox value="orange">Orange</Checkbox>
      <Checkbox value="grapes">Grapes</Checkbox>
    </Checkbox.Group>
  </Story>
</Preview>

### Inline Grouped Checkbox

<Preview>
  <Story name="Inline Grouped">
    <Checkbox.Group mode='horizontal' defaultValue={['orange']}>
      <Checkbox value="apple">Apple</Checkbox>
      <Checkbox value="banana">Banana</Checkbox>
      <Checkbox value="orange">Orange</Checkbox>
      <Checkbox value="grapes">Grapes</Checkbox>
    </Checkbox.Group>
  </Story>
</Preview>

#### Checkbox Props

<Props of={Checkbox} />

#### Checkbox.Group Props

<Props of={Checkbox.Group} />