import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Radio } from './radio.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Radio" component={Radio} />

# Radio Button

- [Radio Button Accessibility
  Tips](/?path=/story/components-inputs-radio-accessibility-tips--page)
- [Form Input Accessibility
  Tips](/?path=/story/components-inputs-accessibility-tips--page)

Radio creates a styled RadioOption with some children. The text of the children is used as the label.

Several Radios with the same `name` are normally used together to provide options for a given field.

## Stories

### Interactive Demo

<Canvas>
  <Story id="components-inputs-radio--demo" />
</Canvas>

### Control on the Right

<Canvas>
  <Story id="components-inputs-radio--direction-right" />
</Canvas>

### Custom Children

<Canvas>
  <Story id="components-inputs-radio--custom-children" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-inputs-radio--mixins-spacing" />
</Canvas>

Stacking:

<Canvas>
  <Story id="components-inputs-radio--mixins-stacked" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-inputs-radio--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Radio} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A66"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/radio"
  type="github"
/>