import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as RadioButtonStories from './radio-button.stories';

<Meta of={RadioButtonStories} />

# Radio button

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

## Table of Contents

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

## 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 `cds-radio-button` components may
be rendered individually, it is recommended they be rendered as children
components of the `cds-radio-button-group` parent component to maintain their
proper controlled states.

<Canvas of={RadioButtonStories.Default} />

## Vertical

<Canvas of={RadioButtonStories.Vertical} />

## Skeleton

<Canvas of={RadioButtonStories.Skeleton} />

## AI Label

<Canvas of={RadioButtonStories.WithAILabel} />

## Component API

## `cds-radio-button`

<ArgTypes of="cds-radio-button" />

## `cds-radio-button-group`

<ArgTypes of="cds-radio-button-group" />

<Markdown>{`${cdnJs({ components: ['radio-button'] })}`}</Markdown>

## 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/web-components/src/components/radio-button/radio-button.mdx).
