Radio Grouped

The Radio Grouped component renders a group of radio buttons from an array of options, simplifying the creation of radio button groups. It provides a convenient way to manage multiple radio options with built-in support for v-model binding, disabled states, and display helpers.

Basic Usage

Option 1

Option 2

Option 3

<template>
  <mc-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
  />
</template>

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

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

With Pre-selected Value

Option 1

Option 2

Option 3

<template>
  <mc-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
  />
</template>

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

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

Disabled State

Add the disabled attribute to disable all options, or set disabled: true on individual options.

All Disabled

Option 1

Option 2

Partial Disabled

Option 1

Option 2

Option 3

<template>
  <div class="mc-flex mc-flex-col mc-gap-4">
    <!-- All disabled -->
    <mc-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      disabled
    />

    <!-- Partial disabled -->
    <mc-radio-grouped
      id="grouped-radio-partial"
      v-model="selectedOption"
      name="grouped_options_partial"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2', disabled: true },
        { text: 'Option 3', value: 'value3' },
      ]"
    />
  </div>
</template>

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

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

Display Helper

Display helpful text or error messages below the radio group using the display-helper, helper-text, and error props.

Helper Text

Option 1

Option 2

Select one of the available options

Error State

Option 1

Option 2

This field is required

<template>
  <div class="mc-flex mc-flex-col mc-gap-6">
    <!-- Helper Text -->
    <mc-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      display-helper
      helper-text="Select one of the available options"
    />

    <!-- Error State -->
    <mc-radio-grouped
      id="grouped-radio-error"
      v-model="selectedOption"
      name="grouped_options_error"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      display-helper
      helper-icon="ph:info-fill"
      helper-text="This field is required"
      error
    />
  </div>
</template>

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

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

Horizontal Alignment

Control the horizontal alignment of the radio group using the horizontal-align prop with values: left, center, or right.

Left Aligned

Option 1

Option 2

Option 3

Center Aligned

Option 1

Option 2

Option 3

Right Aligned

Option 1

Option 2

Option 3

<template>
  <div class="mc-flex mc-flex-col mc-gap-6">
    <mc-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="left"
    />

    <mc-radio-grouped
      id="grouped-radio-center"
      v-model="selectedOption"
      name="grouped_options_center"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="center"
    />

    <mc-radio-grouped
      id="grouped-radio-right"
      v-model="selectedOption"
      name="grouped_options_right"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="right"
    />
  </div>
</template>

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

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

Description

Add helpful descriptions to each radio option using the description property in the options array. This provides additional context or details about each choice.

Option 1This is the first option with a helpful description

Option 2This is the second option with more details

Option 3This is the third option with additional information

<template>
  <mc-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1', description: 'This is the first option with a helpful description' },
      { text: 'Option 2', value: 'value2', description: 'This is the second option with more details' },
      { text: 'Option 3', value: 'value3', description: 'This is the third option with additional information' },
    ]"
  />
</template>

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

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

Choice Box

Use the choice-box prop to display radio options as full-width choice boxes with expanded clickable areas. This improves usability by making the entire component interactive.

Option 1

Option 2

Option 3

<template>
  <mc-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
    choice-box
  />
</template>

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

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

API Reference

Props

Name	Description	Type	Default
id	Unique identifier for the radio group. Used as the base for individual radio button IDs (e.g., id-0, id-1). Required for accessibility.	string	Required
model-value	Current selected value used with v-model for two-way binding. When this matches an option's value, that option is selected.	string | number | boolean	undefined
name	Name attribute for all radio input elements in the group. All radios in the group share this name to ensure only one can be selected at a time.	string	Required
options	Array of radio options. Each option should have text (display label) and value (option value) properties. Options can optionally have a disabled property.	RadioOption[]	[]
disabled	When set to true, all radio buttons in the group become non-interactive and appear visually disabled. Individual options can still be disabled using the disabled property in the option object.	boolean	false
horizontal-align	Controls the horizontal alignment of the radio options. Accepts values: `left`, `center`, or `right`.	'left' | 'center' | 'right'	'left'
display-helper	When set to true, displays the helper text below the radio group options.	boolean	false
helper-text	Helper text to display below the radio group when display-helper is true. Provides additional context or instructions for the user.	string	''
helper-icon	Icon name to display alongside the helper text. Accepts any icon name from the icon library.	string	null
error	When set to true, displays the radio group in an error state with red text for the helper message.	boolean	false
choice-box	When set to true, transforms each radio option into a full-width choice box with an expanded clickable area, improving usability and user experience.	boolean	false

Events

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

RadioOption Interface

The options prop expects an array of objects with the following structure:

interface RadioOption {
  text: string; // Display text for the option
  value: string | number | boolean; // Value for the option
  disabled?: boolean; // Optional: disable individual option
}