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"/>