Radio

Single-choice radio button for selecting one option from a group.

Open in Storybook

Interactive Demo

Option 1First choiceOption 2Second choiceOption 3 (disabled)

Usage

<script setup>
import { ref } from 'vue';
import { Radio } from '@yellowcard/b2b-design-system';

const selected = ref('option1');
</script>

<template>
  <Radio v-model="selected" value="option1" name="group" label="Option 1" />
  <Radio v-model="selected" value="option2" name="group" label="Option 2" />
  <Radio v-model="selected" value="option3" name="group" label="Option 3" />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	string	—	Selected value (v-model)
value*	string	—	Value for this radio option
name*	string	—	Radio group name
label	string	—	Label text
description	string	—	Description text below label
size	string	—	Radio size
disabled	boolean	false	Disabled state
required	boolean	false	Required indicator

Events

Event	Payload	Description
update:modelValue	string	Emitted when selection changes