ce6eb50a98
Storybook was emitting warnings errors about the fact that ArgsTable is deprecated, and also I rewrote imports as those are not the one used in the doc anymore, this will prevent breaking changes in the upcoming upgrades.
114 lines
2.8 KiB
Plaintext
114 lines
2.8 KiB
Plaintext
import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
|
|
import { Radio } from "./index";
|
|
import * as Stories from './index.stories';
|
|
|
|
<Meta of={Stories}/>
|
|
|
|
# Radio
|
|
|
|
Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
|
|
|
|
<Canvas>
|
|
<Story id="components-forms-radio--group"/>
|
|
</Canvas>
|
|
|
|
## Label
|
|
|
|
The `label` props is optional, but you can use it to provide a description of the radio.
|
|
|
|
**Without label**
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--default"/>
|
|
</Canvas>
|
|
|
|
**With label**
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--with-label"/>
|
|
</Canvas>
|
|
|
|
## Value
|
|
|
|
You can set the value of the radio with the `checked` attribute.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--default"/>
|
|
<Story id="components-forms-radio--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 radio.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--with-text"/>
|
|
</Canvas>
|
|
|
|
## Disabled
|
|
|
|
As a regular radio, you can disable it by using the `disabled` props.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--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-radio--with-text"/>
|
|
</Canvas>
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--success"/>
|
|
</Canvas>
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--error"/>
|
|
</Canvas>
|
|
|
|
## Group
|
|
|
|
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--group"/>
|
|
</Canvas>
|
|
|
|
You can also define `state`, `text` props on the group component
|
|
|
|
<Canvas sourceState="shown">
|
|
<Story id="components-forms-radio--group-error"/>
|
|
<Story id="components-forms-radio--group-success"/>
|
|
</Canvas>
|
|
|
|
### Props
|
|
|
|
<ArgTypes of={Radio} />
|
|
|
|
## Design tokens
|
|
|
|
Here are available custom design tokens.
|
|
|
|
| Token | Description |
|
|
|--------------- |----------------------------- |
|
|
| border-color | Border color of the radio |
|
|
| accent-color | Color of the checkmark |
|
|
|
|
The design tokens `font-size`, `font-weight`, `color`, `width`, `height` are shared with [Checkbox](?path=/story/components-forms-checkbox-doc--page)
|
|
|
|
See also [Field](?path=/story/components-forms-field-doc--page)
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Radio/resources/dd_1.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Radio/resources/dd_2.svg"/>
|
|
|
|
##
|
|
|
|
<img src="components/Forms/Radio/resources/dd_3.svg"/> |