import { ArgTypes, Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
import * as RadioButtonStories from './RadioButton.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# RadioButton

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/RadioButton)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/radio-button/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/radio-button/accessibility)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Vertical](#vertical)
- [Skeleton](#skeleton)
- [AI Label](#ai-label)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

Radio buttons represent a group of mutually exclusive choices, compared to
checkboxes that allow users to make one or more selections from a group. In use
cases where only one selection from a group is allowed, use the radio button
component instead of the checkbox. Though the `RadioButton` components may be
rendered individually, it is recommended they be rendered as children components
of the `RadioButtonGroup` parent component to maintain their proper controlled
states.

<Canvas
  of={RadioButtonStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(RadioButtonStories.Default),
    },
  ]}
/>

## Vertical
<Canvas
  of={RadioButtonStories.Vertical}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(RadioButtonStories.Vertical),
    },
  ]}
/>

## Skeleton
<Canvas
  of={RadioButtonStories.Skeleton}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(RadioButtonStories.Skeleton),
    },
  ]}
/>

## AI Label
<Canvas
  of={RadioButtonStories.withAILabel}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(RadioButtonStories.withAILabel),
    },
  ]}
/>

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/RadioButton/RadioButton.mdx).
