Components

Radio group

Group radios under a shared label and value.

Import

import { RadioGroup } from "@dr-max/ui/radio-group"

The entry carries its own precompiled CSS (including the styles of the Radio, Required and Spinner parts it composes) — no extra style imports needed.

Usage

Child radios inherit the group's name and selected value — bind the selection once with v-model on the group:

Delivery method

Personal pickup

Home delivery

Pickup point

<script setup lang="ts">
import { Radio } from "@dr-max/ui/radio"
import { RadioGroup } from "@dr-max/ui/radio-group"
import { ref } from "vue"

const delivery = ref("pickup")
</script>

<template>
  <RadioGroup v-model="delivery" label="Delivery method">
    <Radio value="pickup" label="Personal pickup" />
    <Radio value="home" label="Home delivery" />
    <Radio value="box" label="Pickup point" />
  </RadioGroup>
</template>

Orientation

Radios stack vertically by default — switch to horizontal for short option sets:

Payment

Card

Cash

<template>
  <RadioGroup v-model="payment" label="Payment" orientation="horizontal">
    <Radio value="card" label="Card" />
    <Radio value="cash" label="Cash" />
  </RadioGroup>
</template>

Required and optionality

required renders the visual required indicator next to the group label; optionalityDescription and additionalDescription add supporting texts:

Delivery method

Personal pickup

Pickup point

Pickup points are available in most cities.

<template>
  <RadioGroup
    v-model="delivery"
    label="Delivery method"
    required
    additional-description="Pickup points are available in most cities."
  >
    <Radio value="pickup" label="Personal pickup" />
    <Radio value="box" label="Pickup point" />
  </RadioGroup>
</template>

Disabled

disabled on the group disables every radio in it:

Delivery method

Personal pickup

Home delivery

<template>
  <RadioGroup v-model="delivery" label="Delivery method" disabled>
    <Radio value="pickup" label="Personal pickup" />
    <Radio value="home" label="Home delivery" />
  </RadioGroup>
</template>

Validation errors

Group-level errors render once below the radios and mark the children as invalid when touched:

Delivery method

Personal pickup

Home delivery

Choose a delivery method

<template>
  <RadioGroup
    v-model="delivery"
    label="Delivery method"
    :touched="true"
    :errors="[{ label: 'Choose a delivery method', param: 'required' }]"
  >
    <Radio value="pickup" label="Personal pickup" />
    <Radio value="home" label="Home delivery" />
  </RadioGroup>
</template>

The interactive playground is not available for this component because it composes child Radio components — use the code examples above.