125 lines
3.3 KiB
Plaintext
125 lines
3.3 KiB
Plaintext
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>
|
|
|
|
## Usage with react-hook-form
|
|
|
|
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-checkbox--react-hook-form"/>
|
|
</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"/> |