import {
  Meta,
  Story,
  Canvas,
  Primary,
  Controls,
  Unstyled,
  Source,
} from '@storybook/blocks';
import { Checkbox } from '../../src/lib/components/checkbox/Checkbox.component';

import * as CheckboxStories from './checkbox.stories';

<Meta of={CheckboxStories} name="Guideline" />

# Checkbox

Checkboxes are used to select one or more options in a list.

## Usage

Unlike the radio element it is possible to select more than one option. \
A tick/check indicates that the element is selected. \

<Canvas of={CheckboxStories.ChoiceCheckbox} layout="fullscreen" />

It is possible to use the checkbox to enable or disable an option:

<Canvas of={CheckboxStories.OptionCheckbox} layout="fullscreen" />

## State Variations

### Indeterminate State

Apart from checked and unchecked, checkboxes can be in a third state : indeterminate. \
When a checkbox has sub-options checkboxes, this state indicates that some of the sub-options are checked. \
Clicking on the main checkbox select or unselect all the sub-options boxes.

<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />

### Disabled state

Checkboxes can be disabled, making it impossible to change the box state. \
A not-allowed cursor inform the user about the unavaibility of the action.

<Canvas
  of={CheckboxStories.DisabledCheckboxes}

layout="fullscreen"
/>

### Playground

<Canvas of={CheckboxStories.Playground} layout="fullscreen" />
<Controls of={CheckboxStories.Playground} />
