How to Use v-model with Radio Buttons in Vue

Use v-model on radio inputs to bind their selected value to a Vue data property. Each radio must have the same v-model but a unique value attribute to represent different options.

Syntax

Use v-model on each <input type="radio"> element to bind it to the same data property. Set the value attribute to distinguish each radio option.

• v-model: Binds the selected radio value to a Vue data property.
• value: The value assigned to that radio button.

html

<input type="radio" v-model="picked" value="option1"> Option 1
<input type="radio" v-model="picked" value="option2"> Option 2

Example

This example shows a group of radio buttons bound to a Vue data property picked. Selecting a radio updates the property and displays the chosen option.

vue

<template>
  <div>
    <label>
      <input type="radio" v-model="picked" value="Vue"> Vue
    </label>
    <label>
      <input type="radio" v-model="picked" value="React"> React
    </label>
    <label>
      <input type="radio" v-model="picked" value="Angular"> Angular
    </label>
    <p>Selected: {{ picked }}</p>
  </div>
</template>

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

Output

Three radio buttons labeled Vue, React, Angular. The text below updates to show the selected option, e.g., "Selected: React" when React is chosen.

Common Pitfalls

Common mistakes include:

• Using different v-model bindings for radios in the same group, which breaks selection.
• Not setting the value attribute, causing all radios to have the same value.
• Binding v-model to a non-reactive property or missing initialization.

Always ensure all radios share the same v-model and have unique value attributes.

html

<!-- Wrong: different v-model bindings -->
<input type="radio" v-model="choice1" value="A"> A
<input type="radio" v-model="choice2" value="B"> B

<!-- Right: same v-model binding -->
<input type="radio" v-model="choice" value="A"> A
<input type="radio" v-model="choice" value="B"> B

Quick Reference

Concept	Description
v-model	Binds the selected radio value to a Vue reactive property
value	Unique value for each radio option
Same v-model	All radios in a group must share the same v-model
Reactive property	The bound property must be reactive (e.g., ref or data)
Display selection	Use interpolation {{ }} to show the selected value

Key Takeaways

Bind all radio buttons in a group to the same reactive property using v-model.

Set a unique value attribute on each radio to distinguish options.

Initialize the bound property reactively with ref or data.

Use interpolation to display the selected radio value dynamically.

Avoid using different v-model bindings for radios in the same group.