import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
import * as Stories from './index.stories';
import { Checkbox } from './index';

<Meta of={Stories}/>

# Checkbox

Cunningham provides a versatile Checkbox component that you can use in your forms.

<Canvas>
  <Story id="components-forms-checkbox--group"/>
</Canvas>

## Label

The `label` props is optional, but you can use it to provide a description of the checkbox.

**Without label**

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--default"/>
</Canvas>

**With label**

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-label"/>
</Canvas>

## Value

You can set the value of the checkbox in 3 different ways.

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--default"/>
  <Story id="components-forms-checkbox--indeterminate"/>
  <Story id="components-forms-checkbox--checked"/>
</Canvas>

## Texts

As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-texts"/>
</Canvas>

## Disabled

As a regular checkbox, you can disable it by using the `disabled` props.

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--disabled"/>
</Canvas>

## States

You can use the following props to change the state of the Input component by using the `state` props.

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--with-texts"/>
</Canvas>

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--success"/>
</Canvas>

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--error"/>
</Canvas>

## Group

It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--group"/>
</Canvas>

You can also define `state`, `text` props on the group component

<Canvas sourceState="shown">
  <Story id="components-forms-checkbox--group-error"/>
  <Story id="components-forms-checkbox--group-success"/>
</Canvas>

### Props

<ArgTypes of={Checkbox} />

## Design tokens

Here are available custom design tokens.

| Token        	| Description                 	|
|---------------	|-----------------------------	|
| background-color--hover | Background color of the component on mouse hover or focus |
| font-size        	| Label font size ( shared with radio )       	|
| font-weight 	| Label font weight ( shared with radio )	|
| color   	| Label color ( shared with radio ) 	|
| border-color   	| Border color of the checkbox    	|
| border-radius     	| Border radius of the checkbox      	|
| accent-color     	| Color of the checkmark and the indeterminate mark      	|
| width     	| Width of the checkbox      	|
| height     	| Height of the checkbox      	|

See also [Field](?path=/story/components-forms-field-doc--page)

##

<img src="components/Forms/Checkbox/resources/dd_1.svg"/>

##

<img src="components/Forms/Checkbox/resources/dd_2.svg"/>