import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/addon-docs/blocks';

import * as stories from './radio-buttons.stories';

<Meta of={stories}/>

# Radio Buttons

Radio Buttons are used when the user must make only one selection out of a group of items.
The `for` attribute is necessary to bind our custom radio button with the input.
Add the input's `id` as the value of the `for` attribute of the label.


Add radio buttons to a group by adding the name attribute along with the same corresponding value
for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.

## Default

<Story of={stories.Default} />
<Source of={stories.Default} />

## With Gap

To create a radio button with a gap, add `class="with-gap"` to your input. See the example below.

<Story of={stories.WithGap} />
<Source of={stories.WithGap} />