RadioGroup

Wraps multiple Radio components, providing shared name and value context via provide/inject. Emits a single update:modelValue when any child is selected.

ExamplesCodeUsageChangelog

Basic usage

Shift

Morning (6 AM)Afternoon (2 PM)Night (10 PM)

Selected: morning

Tailwind v4

<script setup>
import { ref } from 'vue'
const shift = ref('morning')
</script>

<template>
  <RadioGroup v-model="shift" label="Shift" name="shift-group">
    <Radio value="morning" label="Morning (6 AM)" />
    <Radio value="afternoon" label="Afternoon (2 PM)" />
    <Radio value="night" label="Night (10 PM)" />
  </RadioGroup>
</template>

No pre-selection

T-shirt size

SmallMediumLargeX-Large

Tailwind v4

<RadioGroup v-model="size" label="T-shirt size">
  <Radio value="sm" label="Small" />
  <Radio value="md" label="Medium" />
  <Radio value="lg" label="Large" />
  <Radio value="xl" label="X-Large" />
</RadioGroup>

Disabled group

Options (disabled)

Option AOption BOption C

Tailwind v4

<RadioGroup v-model="val" label="Options (disabled)" disabled>
  <Radio value="a" label="Option A" />
  <Radio value="b" label="Option B" />
</RadioGroup>

Props

Prop	Type	Default	Description
modelValue	string	—	Currently selected value
name	string	—	Shared name attribute passed to all child Radio inputs
disabled	boolean	false	Disables all child Radio components
label	string	—	Group label rendered above the options

Emits

Event	Payload	Description
update:modelValue	string	Value of the newly selected radio

Slots

Slot	Description
default	Radio components