Radio

A Radio Button is a component that enables a user to select a single option from a set of choices.

Basic Usage

Radio Label 1

Radio Label 2

<template>
  <div class="mc-flex mc-flex-col mc-items-start mc-gap-2">
    <mc-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</mc-radio>
    <mc-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">Radio Label 2</mc-radio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('');
</script>

Active

Radio Label 1

Radio Label 2

<template>
  <mc-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</mc-radio>
  <mc-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">Radio Label 2</mc-radio>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('value2');
</script>

Disabled

Add the disabled attribute to the <mc-radio> component to disable the radio button.

Radio Label 1

Radio Label 2

<template>
  <div class="mc-flex mc-flex-col mc-items-start mc-gap-2">
    <mc-radio id="disabledradio1" v-model="radioModel" name="radio_name" value="value1">Radio Label 1</mc-radio>
    <mc-radio id="disabledradio2" v-model="radioModel" name="radio_name" value="value2" disabled>
      Radio Label 2
    </mc-radio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radioModel = ref('');
</script>

Choice Box

Use the choiceBox prop to display radio buttons in a choice box style with an expanded clickable area. This makes the entire component clickable, improving usability and user experience.

Option 1

Select this option for feature A

Option 2

Select this option for feature B

Option 3

Select this option for feature C

<template>
  <div class="mc-flex mc-flex-col mc-items-start mc-gap-2">
    <mc-radio id="choicebox1" v-model="selectedOption" name="radio_choicebox" value="option1" choice-box full-width>
      <div class="mc-body-sm-regular mc-text-color-strong">Option 1</div>
      <div class="mc-body-sm-regular mc-text-color-base">Select this option for feature A</div>
    </mc-radio>
    <mc-radio id="choicebox2" v-model="selectedOption" name="radio_choicebox" value="option2" choice-box full-width>
      <div class="mc-body-sm-regular mc-text-color-strong">Option 2</div>
      <div class="mc-body-sm-regular mc-text-color-base">Select this option for feature B</div>
    </mc-radio>
    <mc-radio id="choicebox3" v-model="selectedOption" name="radio_choicebox" value="option3" choice-box full-width>
      <div class="mc-body-sm-regular mc-text-color-strong">Option 3</div>
      <div class="mc-body-sm-regular mc-text-color-base">Select this option for feature C</div>
    </mc-radio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

API Reference

Props

Name	Description	Type	Default
id	Unique identifier for the radio input element. Required for accessibility and label association.	string	Required
modelValue	Current selected value used with v-model for two-way binding. When this matches the radio's value prop, the radio is selected.	string | number | boolean	undefined
name	Name attribute for the radio input element. Radio buttons in the same group should share the same name to ensure only one can be selected at a time.	string	Required
value	The value associated with this radio button. When the radio is selected, this value is assigned to the modelValue.	string | number | boolean	Required
disabled	When set to true, the radio button becomes non-interactive and appears visually disabled. Users cannot select a disabled radio button.	boolean	false
description	Additional explanatory text displayed below the radio label to provide more context or details about this option.	string	undefined
bordered	When set to true, adds a border around the entire radio component (including the label), providing visual separation from surrounding elements.	boolean	false
fullWidth	When set to true, the radio component will stretch to fill the full width of its container. When false, it will only be as wide as its content.	boolean	false
choiceBox	When set to true, transforms the radio button into a choice box style with an expanded clickable area that encompasses the entire component, making it easier to select by clicking anywhere on the box.	boolean	false

Events

Name	Description	Parameters
update:modelValue	Emitted when the radio button is selected. This event is used for v-model binding to work correctly.	(value: string | number | boolean) - The value of the selected radio button

Slots

Name	Description
default	Content to be displayed as the radio button's label. This typically contains text but can include other elements for more complex labels.

Animation

Animation	Description
animate-shadow-grow	Applied when the radio button is selected, creating a smooth transition from an empty circle to a filled circle with a white center.