RadioButton.mdx

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { Primary } from './RadioButton.stories';

Radio Button

A radio button typically represents a single option in a group of related choices. Only one can be selected at a time.

How to Use

Most of the time, radio buttons should be grouped together using a radio-group component. The name prop should be the same across the group so that (1) HTML can use it to figure out which group a radio button is in, and ensure that only one button in the group is selected and (2) screen readers can accurately group options together.

You can pass in the v-model prop to bind radio buttons to the parent component's data model.

You can pass in a @click handler to trigger a custom function on click events. The event object will be emitted along with the click event.

If nothing is provided in the slot, the label will be rendered by default. Alternatively, you can provide any sort of content to be rendered in place of the label.

<RadioButton
  name="postcard-size"
  value="4x6"
  label="4x6"
  v-model="postcard.size"
  @click="handleClick"
/>

Example with slot that contains label and tooltip

<RadioButton
  name="postcard-size"
  value="4x6"
  label="4x6"
  v-model="postcard.size"
  @click="handleClick"
>
  <div class="flex">{{ service.description }}</div>
</RadioButton>

Props