Components / Forms

RadioGroup

Native radios grouped by a fieldset and legend.

Preview

Plan

StarterGrowthEnterprise

Use cases

Mutually exclusive plans

Choose one subscription plan and submit its scalar value.

Delivery preference

Show two short choices in a horizontal fieldset.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import RadioGroup from './components/ui/radio-group/RadioGroup.vue'
import RadioGroupItem from './components/ui/radio-group/RadioGroupItem.vue'
const plan = ref<string | number>('personal')
</script>

<template>
  <RadioGroup v-model="plan" name="plan">
    <template #legend>Plan</template>
    <RadioGroupItem value="personal">Personal</RadioGroupItem>
    <RadioGroupItem value="team">Team</RadioGroupItem>
  </RadioGroup>
</template>

More examples

Subscription plan

The legend names the native radio fieldset.

Subscription plan

<script setup lang="ts">
import { ref } from 'vue'
import RadioGroup from './components/ui/radio-group/RadioGroup.vue'
import Radio from './components/ui/radio-group/RadioGroupItem.vue'
const plan = ref<string | number>('monthly')
</script>
<template>
  <RadioGroup v-model="plan" name="plan" required>
    <template #legend>Billing plan</template>
    <Radio value="monthly">Monthly</Radio>
    <Radio value="annual">Annual</Radio>
  </RadioGroup>
</template>

Delivery speed

Orientation changes layout while native radio behavior stays intact.

Delivery speed

<script setup lang="ts">
import { ref } from 'vue'
import RadioGroup from './components/ui/radio-group/RadioGroup.vue'
import Radio from './components/ui/radio-group/RadioGroupItem.vue'
const speed = ref<string | number>('standard')
</script>
<template>
  <RadioGroup v-model="speed" name="delivery" orientation="horizontal">
    <template #legend>Delivery speed</template>
    <Radio value="standard">Standard</Radio>
    <Radio value="express">Express</Radio>
  </RadioGroup>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for RadioGroup
Name	Type	Default or requirement
`v-model`	string \| number	undefined
`name`	string	generated
`orientation`	horizontal \| vertical	vertical
`disabled / required / invalid`	boolean	false
`RadioGroupItem value`	string \| number	required

RadioGroupItem must be inside RadioGroup. Use the legend slot to name the group.

Implementation notes

Radio must be rendered inside RadioGroup; the root owns the shared model.
Use different name values for unrelated groups in the same form.

Accessibility and localization

Provide a legend for each group. Native radios handle arrow keys, Space, and tab stops.