import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './radio.stories.js';
# Radio Buttons
Radio buttons are used when there is list of two or more options that are mutually exclusive and the user must select exactly one choice. If users can make more than one selection, use checkboxes.
In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Radio button icons and their labels should be left-aligned and vertical for better scannability when appropriate.
## Properties
The radio button component accepts the following properties:
`label`: The value associated with the radio button. String, Number, or Boolean. Required.
`disabled`: Whether the radio button should be disabled. Boolean, defaults to false.
`display`: The value to display for the radio button. String, Number, or Boolean. Required.
`value`: Data variable to be bound to the radio button. Must be passed in using the `v-model` directive. Required.
### Radio Buttons
{stories.radio()}
#### Code
```js
data() {
return {
radio: 3,
radio_d:'selected and disabled'
}
}
```
```html
Option A
Option B
Option C
```
### Radio with Button style toggle
{stories.RadioToggle()}
```js
data() {
return {
radio1: 'Option 2'
}
}
```
```html
```