109 lines
2.7 KiB
Plaintext
109 lines
2.7 KiB
Plaintext
|
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
|
||
|
|
import { Radio } from "./index";
|
||
|
|
|
||
|
|
<Meta title="Components/Forms/Radio/Doc" component={Radio}/>
|
||
|
|
|
||
|
|
# 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 withSource="open">
|
||
|
|
<Story id="components-forms-radio--default"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
**With label**
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<Story id="components-forms-radio--with-label"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Value
|
||
|
|
|
||
|
|
You can set the value of the radio with the `checked` attribute.
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<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 withSource="open">
|
||
|
|
<Story id="components-forms-radio--with-text"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Disabled
|
||
|
|
|
||
|
|
As a regular radio, you can disable it by using the `disabled` props.
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<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 withSource="open">
|
||
|
|
<Story id="components-forms-radio--with-text"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<Story id="components-forms-radio--success"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<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 withSource="open">
|
||
|
|
<Story id="components-forms-radio--group"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
You can also define `state`, `text` props on the group component
|
||
|
|
|
||
|
|
<Canvas withSource="open">
|
||
|
|
<Story id="components-forms-radio--group-error"/>
|
||
|
|
<Story id="components-forms-radio--group-success"/>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## 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"/>
|