name attribute on radio buttons with v-model: yes or no?

[arun-mani-j]

Hii.

To save your time: When making custom components with radio buttons and v-model, should we include name? If not, can this be documented in https://vuejs.org/guide/essentials/forms.html#radio-1?

I made a custom component that has a set of radio buttons with v-model, and displayed the chosen value. Something like this:

<script setup>
import { ref } from 'vue'

const picked = ref('One')
</script>

<template>
  <div>Picked: {{ picked }}</div>

	<input type="radio" id="one" name="x" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" name="x" value="Two" v-model="picked" />
  <label for="two">Two</label>
</template>

However I found that whenever I clicked a radio button, the displayed picked value changed, but the actual radio button did not get selected. If I click again, then it got selected.

I tried all possible things to reproduce the error, including making a new project, removing CSS, making a duplicate of the component with only non-trivial stuff, but everything failed. I could produce the problem only in one page of my app and that too when I placed it in inside <header>.

Frustrated, I asked LLM and it told me:

The most common cause of this behavior in Vue 3 (with native elements and v-model or defineModel()) is including a name attribute on the radio inputs.
Vue manages radio groups internally via the shared v-model binding: it sets the checked property on the matching input and unchecks others. However, if you add a name attribute (even a dynamic one like :name="someGroup"), the browser's native radio grouping takes over. This can conflict with Vue's management, especially when the component is reused or the DOM updates in certain ways — leading to the model updating correctly (ref changes), but the visual "checked" state lagging or requiring a second click to sync.

(Not trying to praise LLM, but giving credit where due).

So I tried removing name attribute and it worked fine now! If I added back the name attribute, the problem was back.

The LLM refused to share links, but when I searched online for "Vue radio-button name v-model", I found this blog - https://williamhuster.com/radio-buttons-in-vue/. OP also faced the same problem and resolved it by removing name attribute.

This is still a mystery to me and searching for "name" in https://vuejs.org/guide/essentials/forms.html#radio-1 does not show any information about whether we should include name attribute in radio buttons.

So I'm wondering if this is a well known problem and if this can be documented in Vue's docs.

Thank you.

[ismaildasci]

Yeah this is actually a known behavior and you found the solution yourself - dont use name attribute when using v-model on radio buttons.

Heres whats happening:

When you use v-model on radio inputs, Vue handles the grouping and selection internally through JavaScript. It tracks which radio is selected via the reactive variable.

But when you also add name attribute, the browser's native radio grouping kicks in too. Now you have two systems trying to manage the same thing - Vue's reactivity AND browser's native radio behavior. They conflict with each other.

Thats why:

• First click: Vue updates the value (you see it change), but browser's native grouping interferes with the visual checked state
• • Second click: Everything syncs up finally
    The fix: Just remove the name attribute completely when using v-model:

<input type="radio" id="one" value="One" v-model="picked" />
<input type="radio" id="two" value="Two" v-model="picked" />

The v-model binding already groups them together - no need for name.

You only need name attribute if youre doing traditional form submission without JavaScript, which is rare in Vue apps anyway.

[arun-mani-j]

Thank you so much for the reply. Is this documented somewhere in Vue? If no, can it be done?