VRadio & VRadioGroup
The VRadio component provides a single radio button, while VRadioGroup manages a group of radio buttons for mutually exclusive selection.
Basic Usage
<template>
<VRadioGroup v-model="selected" label="Select an option">
<VRadio label="Option 1" value="1" />
<VRadio label="Option 2" value="2" />
<VRadio label="Option 3" value="3" />
</VRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('1')
</script>
VRadioGroup Props
The selected value from the radio group.
Label for the radio group.
Display radios in a column layout.
Display radios in a row layout.
Display radios inline (wrapping).
Disable all radio buttons in the group.
Make all radio buttons readonly.
Color of the selected radio button.
Icon to display when a radio is selected.
falseIcon
string
default:"$radioOff"
Icon to display when a radio is not selected.
HTML input type attribute.
VRadio Props
Label text for the radio button.
The value that will be set when this radio is selected.
Color of the radio button when selected.
Disable this radio button.
falseIcon
string
default:"$radioOff"
Icon when not selected.
Row Layout
<template>
<VRadioGroup v-model="selected" row>
<VRadio label="Option 1" value="1" />
<VRadio label="Option 2" value="2" />
<VRadio label="Option 3" value="3" />
</VRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('1')
</script>
With Colors
<template>
<VRadioGroup v-model="selected">
<VRadio label="Red" value="red" color="red" />
<VRadio label="Green" value="green" color="green" />
<VRadio label="Blue" value="blue" color="blue" />
</VRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('red')
</script>
Disabled State
<template>
<div>
<!-- Entire group disabled -->
<VRadioGroup v-model="selected" disabled>
<VRadio label="Option 1" value="1" />
<VRadio label="Option 2" value="2" />
</VRadioGroup>
<!-- Individual radio disabled -->
<VRadioGroup v-model="selected2">
<VRadio label="Enabled" value="1" />
<VRadio label="Disabled" value="2" disabled />
</VRadioGroup>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('1')
const selected2 = ref('1')
</script>
With Validation
<template>
<VForm>
<VRadioGroup
v-model="selected"
label="Required selection"
:rules="[v => !!v || 'Selection is required']"
>
<VRadio label="Option 1" value="1" />
<VRadio label="Option 2" value="2" />
<VRadio label="Option 3" value="3" />
</VRadioGroup>
</VForm>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
</script>
Custom Labels
<template>
<VRadioGroup v-model="selected">
<VRadio value="1">
<template #label>
<div>
<div class="font-weight-bold">Premium Plan</div>
<div class="text-caption">$99/month</div>
</div>
</template>
</VRadio>
<VRadio value="2">
<template #label>
<div>
<div class="font-weight-bold">Basic Plan</div>
<div class="text-caption">$29/month</div>
</div>
</template>
</VRadio>
</VRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref('1')
</script>
Dynamic Radios
<template>
<VRadioGroup v-model="selected" label="Select a plan">
<VRadio
v-for="plan in plans"
:key="plan.id"
:label="plan.name"
:value="plan.id"
/>
</VRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(1)
const plans = [
{ id: 1, name: 'Free' },
{ id: 2, name: 'Pro' },
{ id: 3, name: 'Enterprise' },
]
</script>
Emitted when the selected radio changes.
Customize the radio label content.
Default slot for VRadioGroup - place VRadio components here.