How to handle radio buttons in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Handling radio buttons in Vue creates mutually exclusive selection groups where only one option can be chosen, perfect for single-choice scenarios in forms and user interfaces. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented radio button groups in thousands of Vue applications for settings, preferences, and form selections. From my expertise, the most effective approach is using v-model with the same reactive variable across all radio buttons in a group. This method ensures automatic mutual exclusivity and clean data binding for single-selection scenarios.
Use v-model with the same reactive variable across radio buttons to create mutually exclusive selection groups.
<template>
<div>
<h3>Select your plan:</h3>
<label>
<input type="radio" value="basic" v-model="selectedPlan">
Basic Plan ($9/month)
</label>
<label>
<input type="radio" value="premium" v-model="selectedPlan">
Premium Plan ($19/month)
</label>
<label>
<input type="radio" value="enterprise" v-model="selectedPlan">
Enterprise Plan ($49/month)
</label>
<p>Selected plan: {{ selectedPlan }}</p>
<button :disabled="!selectedPlan">
Continue with {{ selectedPlan }} plan
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selectedPlan = ref('')
</script>
Radio buttons with the same v-model automatically form a group where only one can be selected. The value attribute determines what gets stored in the reactive variable when that radio button is selected. Vue handles the mutual exclusivity automatically.
Best Practice Note:
This is the same radio button handling approach we use in CoreUI Vue components for single-choice selections and configuration options.
