{/* Replace `Preview` with `Canvas` and `Props` with `ArgTypes` from `@storybook/blocks` */}

import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';
import * as RadioStories from './Radio.stories.tsx';
import Radio from './';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';

{/* `Meta` attaches this .mdx doc to a story (.story.tsx) so they will be placed under same path */}

<Meta of={RadioStories} />

# Radio

You can use the Radio component to select one of many given choices.

You may put Radio components in a RadioGroup to represent a set of related options, from which you can select only one option.

## Importing

```javascript
import { Radio } from 'amazon-chime-sdk-component-library-react';
```

## Example

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Radio value="apple" label="Radio Input" checked onChange={(e) => {}} />
  </Canvas>
</ThemeProvider>

```jsx
<Radio value="apple" label="Radio Input" checked onChange={(e) => {}} />
```

## Props

<ArgTypes of={Radio} />