import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
import Box from '@mui/material/Box';
import Bell from '@lunit/design-system-icons/Bell';

import * as BasicCheckbox from './BasicCheckbox.stories';

<Meta name="Checkbox Docs" of={BasicCheckbox} />

# Checkbox

Checkboxes allow the user to select one or more items from a set.

## Usage

### Basic Checkbox

```tsx
import { Checkbox } from '@lunit/design-system';
// or
import Checkbox from '@lunit/design-system/Checkbox';

<Checkbox />;
```

### Demo

<Canvas of={BasicCheckbox.BasicCheckbox} sourceState="none" />

<Controls />

### Label

You can provide a label to the Checkbox thanks to the FormControlLabel component.

<Canvas of={BasicCheckbox.Label} sourceState="none" />

```tsx
<FormGroup>
  <FormControlLabel control={<Checkbox />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled Label" />
</FormGroup>
```

### Indeterminate

A Checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.

<Canvas of={BasicCheckbox.Indeterminate} sourceState="none" />

```tsx
<FormLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
    />
  }
/>
```

### Disabled

If you want to disable the button, you can use the disabled prop.
Default disabled is false.

<Canvas of={BasicCheckbox.Disabled} sourceState="none" />

```tsx
<Checkbox checked disabed />
<Checkbox indeterminate disabed />
<Checkbox disabed />
```

## Reference

- [Material-UI Checkbox](https://mui.com/material-ui/react-checkbox/)
- [Material-UI Checkbox API](https://mui.com/material-ui/api/checkbox/)
- [Lunit Design System Button Figma](https://www.figma.com/file/BSdRUpEPp7XiJ9YnEqpf6F/1.0.0_Components?type=design&node-id=1923-6820&mode=design&t=0BjGJV6Ef9WjfuCD-0)

## Support

- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
- Slack: #tf_design_system