import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

# Radio
<Meta title="Radio" component="fw-radio" />

## Props

<Props of="fw-radio"/>

## Usage

### Default
<Preview>
<Story name="Default">
  {() => '<fw-radio></fw-radio>'}
</Story>
</Preview>

### Checked State
<Preview>
<Story name="Checked">
  {() => "<fw-radio checked></fw-radio>"}
</Story>
</Preview>

### Disabled State
<Preview>
<Story name="Disabled">
  {() => "<fw-radio disabled></fw-radio>"}
</Story>
</Preview>

### Checked and Disabled State
<Preview>
<Story name="DisabledWithChecked">
  {() => "<fw-radio disabled checked></fw-radio>"}
</Story>
</Preview>

### With label
<Preview>
<Story name="WithLabel">
  {() => '<fw-radio>Radio Label Here</fw-radio>'}
</Story>
</Preview>

### With label and disabled
<Preview>
<Story name="DisabledWithLabel">
  {() => '<fw-radio disabled>Radio Label Here</fw-radio>'}
</Story>
</Preview>

### With description and label
<Preview>
<Story name="withDescriptionAndLabel">
  {() => '<fw-radio description="This is a subheading">Radio Label Here</fw-radio>'}
</Story>
</Preview>

### With description and label Disabled
<Preview>
<Story name="WithDescriptionAndLabelDisabled">
  {() =>
    '<fw-radio disabled description="This is a subheading">Radio Label Here</fw-radio>'
  }
</Story>
</Preview>
