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 button inputs is crucial for creating single-selection forms, preference settings, and option choosers in Vue applications.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented radio button controls in hundreds of Vue components over 25 years of development.
From my expertise, the most reliable approach is using the v-model directive with the same model property across all radio buttons in a group.
This ensures only one option can be selected at a time while maintaining reactive data binding.
Use v-model with the same property across radio buttons to handle single selection.
<template>
<input type="radio" v-model="selected" value="option1" />
<input type="radio" v-model="selected" value="option2" />
<p>Selected: {{ selected }}</p>
</template>
<script>
export default {
data() {
return { selected: '' }
}
}
</script>
Here both radio buttons share the same v-model="selected" property but have different value attributes. Vue automatically handles the single-selection logic, updating selected with the chosen option’s value. When one radio button is selected, others in the same group are automatically deselected, maintaining the expected radio button behavior.
Best Practice Note:
This is the same radio button handling pattern we use in CoreUI Vue components for configuration forms and user preferences. Always provide meaningful value attributes and consider setting a default selection to improve user experience in forms.
