fix: radio buttons with same name handle errors correctly (#5001)

When multiple Field components share the same name (e.g. radio buttons),
only the last one would receive validation errors. This happened because
createPathState only reused existing path states for fields explicitly
typed as checkbox/radio, causing separate path states to be created when
type was not specified on the Field component.

The fix makes createPathState reuse existing path states for ALL fields
sharing the same path, not just checkbox/radio types. This ensures:

- All fields with the same name share a single PathState and its errors
- removePathState properly decrements fieldsCount for all shared fields
- Unmount logic handles array IDs for non-multiple shared fields
- Path values are only unset when the last field unmounts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: logaretm

.changeset/fix-5001-radio-same-name.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+Fix radio button same name validation errors (#5001)

packages/vee-validate/src/useField.ts

@@ -386,10 +386,7 @@ function _useField<TValue = unknown>(
 
     flags.pendingUnmount[field.id] = true;
     const pathState = form.getPathState(path);
-    const matchesId =
-      Array.isArray(pathState?.id) && pathState?.multiple
-        ? pathState?.id.includes(field.id)
-        : pathState?.id === field.id;
+    const matchesId = Array.isArray(pathState?.id) ? pathState?.id.includes(field.id) : pathState?.id === field.id;
     if (!matchesId) {
       return;
     }
@@ -405,7 +402,7 @@ function _useField<TValue = unknown>(
       if (Array.isArray(pathState.id)) {
         pathState.id.splice(pathState.id.indexOf(field.id), 1);
       }
-    } else {
+    } else if (pathState?.multiple || pathState?.fieldsCount <= 1) {
       form.unsetPathValue(toValue(name));
     }
 

packages/vee-validate/src/useForm.ts

@@ -262,10 +262,14 @@ export function useForm<
     config?: Partial<PathStateConfig<TOutput[TPath]>>,
   ): PathState<TValues[TPath], TOutput[TPath]> {
     const initialValue = computed(() => getFromPath(initialValues.value, toValue(path)));
-    const pathStateExists = pathStateLookup.value[toValue(path)];
+    const pathValue = toValue(path);
+    const pathStateExists = pathStateLookup.value[pathValue];
     const isCheckboxOrRadio = config?.type === 'checkbox' || config?.type === 'radio';
-    if (pathStateExists && isCheckboxOrRadio) {
-      pathStateExists.multiple = true;
+    if (pathStateExists && normalizeFormPath(toValue(pathStateExists.path)) === normalizeFormPath(pathValue)) {
+      if (isCheckboxOrRadio) {
+        pathStateExists.multiple = true;
+      }
+
       const id = FIELD_ID_COUNTER++;
       if (Array.isArray(pathStateExists.id)) {
         pathStateExists.id.push(id);
@@ -280,7 +284,6 @@ export function useForm<
     }
 
     const currentValue = computed(() => getFromPath(formValues, toValue(path)));
-    const pathValue = toValue(path);
 
     const unsetBatchIndex = UNSET_BATCH.findIndex(_path => _path === pathValue);
     if (unsetBatchIndex !== -1) {
@@ -576,7 +579,7 @@ export function useForm<
       validateField(path, { mode: 'silent', warn: false });
     });
 
-    if (pathState.multiple && pathState.fieldsCount) {
+    if (pathState.fieldsCount) {
       pathState.fieldsCount--;
     }
 
@@ -589,7 +592,7 @@ export function useForm<
       delete pathState.__flags.pendingUnmount[id];
     }
 
-    if (!pathState.multiple || pathState.fieldsCount <= 0) {
+    if (pathState.fieldsCount <= 0) {
       pathStates.value.splice(idx, 1);
       unsetInitialValue(path);
       rebuildPathLookup();

packages/vee-validate/tests/Form.spec.ts

@@ -3182,16 +3182,14 @@ test('removes proper pathState when field is unmounting', async () => {
   await flushPromises();
 
   expect(form.meta.value.valid).toBe(false);
-  expect(form.getAllPathStates()).toMatchObject([
-    { id: 0, path: 'foo' },
-    { id: 1, path: 'foo' },
-  ]);
+  // Both fields share the same pathState with an array of ids
+  expect(form.getAllPathStates()).toMatchObject([{ id: [0, 1], path: 'foo', fieldsCount: 2 }]);
 
   renderTemplateField.value = false;
   await flushPromises();
 
   expect(form.meta.value.valid).toBe(true);
-  expect(form.getAllPathStates()).toMatchObject([{ id: 0, path: 'foo' }]);
+  expect(form.getAllPathStates()).toMatchObject([{ id: [0], path: 'foo', fieldsCount: 1 }]);
 });
 
 test('handles onSubmit with generic object from zod schema', async () => {
@@ -3241,3 +3239,105 @@ test('handles onSubmit with generic object from zod schema', async () => {
     expect.anything(),
   );
 });
+
+// #5001 - radio buttons without explicit type on Field should share errors
+test('radio buttons with same name should all expose errors even without type=radio on Field', async () => {
+  const REQUIRED_MSG = 'This field is required';
+  defineRule('required', (value: unknown) => {
+    if (!value) {
+      return REQUIRED_MSG;
+    }
+    return true;
+  });
+
+  const wrapper = mountWithHoc({
+    template: `
+      <VForm v-slot="{ errors: formErrors }">
+        <Field name="drink" rules="required" v-slot="{ errors, handleChange }">
+          <input type="radio" name="drink" value="" @change="handleChange" />
+          <span class="err-coffee">{{ errors[0] }}</span>
+        </Field>
+        <Field name="drink" rules="required" v-slot="{ errors, handleChange }">
+          <input type="radio" name="drink" value="Tea" @change="handleChange($event.target.value)" />
+          <span class="err-tea">{{ errors[0] }}</span>
+        </Field>
+        <Field name="drink" rules="required" v-slot="{ errors, handleChange }">
+          <input type="radio" name="drink" value="Coke" @change="handleChange($event.target.value)" />
+          <span class="err-coke">{{ errors[0] }}</span>
+        </Field>
+
+        <span id="form-err">{{ formErrors.drink }}</span>
+        <button>Submit</button>
+      </VForm>
+    `,
+  });
+
+  const errCoffee = wrapper.$el.querySelector('.err-coffee');
+  const errTea = wrapper.$el.querySelector('.err-tea');
+  const errCoke = wrapper.$el.querySelector('.err-coke');
+  const formErr = wrapper.$el.querySelector('#form-err');
+
+  // Submit without selecting a radio button to trigger required error
+  wrapper.$el.querySelector('button').click();
+  await flushPromises();
+
+  // All radio buttons should show the same error, not just the last one
+  expect(formErr.textContent).toBe(REQUIRED_MSG);
+  expect(errCoffee.textContent).toBe(REQUIRED_MSG);
+  expect(errTea.textContent).toBe(REQUIRED_MSG);
+  expect(errCoke.textContent).toBe(REQUIRED_MSG);
+});
+
+// #5001 - radio buttons with explicit type=radio on Field should share errors
+test('radio buttons with type=radio and same name should all expose errors', async () => {
+  const REQUIRED_MSG = 'This field is required';
+  defineRule('required', (value: unknown) => {
+    if (!value) {
+      return REQUIRED_MSG;
+    }
+    return true;
+  });
+
+  const wrapper = mountWithHoc({
+    setup() {
+      const schema = {
+        drink: 'required',
+      };
+
+      return {
+        schema,
+      };
+    },
+    template: `
+      <VForm :validation-schema="schema">
+        <Field name="drink" type="radio" value="" v-slot="{ errors, field }">
+          <input type="radio" v-bind="field" value="" />
+          <span class="err-coffee">{{ errors[0] }}</span>
+        </Field>
+        <Field name="drink" type="radio" value="Tea" v-slot="{ errors, field }">
+          <input type="radio" v-bind="field" value="Tea" />
+          <span class="err-tea">{{ errors[0] }}</span>
+        </Field>
+        <Field name="drink" type="radio" value="Coke" v-slot="{ errors, field }">
+          <input type="radio" v-bind="field" value="Coke" />
+          <span class="err-coke">{{ errors[0] }}</span>
+        </Field>
+
+        <button>Submit</button>
+      </VForm>
+    `,
+  });
+
+  const errCoffee = wrapper.$el.querySelector('.err-coffee');
+  const errTea = wrapper.$el.querySelector('.err-tea');
+  const errCoke = wrapper.$el.querySelector('.err-coke');
+
+  // Submit without selecting a radio button to trigger required error
+  wrapper.$el.querySelector('button').click();
+  await flushPromises();
+
+  // All radio buttons should show the same error
+  expect(errCoffee.textContent).toBe(REQUIRED_MSG);
+  expect(errTea.textContent).toBe(REQUIRED_MSG);
+  expect(errCoke.textContent).toBe(REQUIRED_MSG);
+});