Invalid data attribute is added incorrectly when there is duplicated input names

Author: tjhooCreated Sep 5, 2023Updated Aug 31, 2026

LabelsType: BugPackage: react/form

Bug report

Current Behavior

I have a form to accept two addresses,

<Form.Root className="flex flex-col">
  <Form.Field name="address">
    <Form.Label className="data-[invalid]:text-red-400">Address 1</Form.Label>
    <Form.Control type="text" className="w-full" required />
  </Form.Field>
  <Form.Field name="address">
    <Form.Label className="data-[invalid]:text-red-400">Address 2</Form.Label>
    <Form.Control type="text" className="w-full" required />
  </Form.Field>
  <Form.Submit>OK</Form.Submit>
</Form.Root>

When the form is submitted with the first address with value but the second address is empty. Both elements are marked with data-invalid=true.

The reason why I wanted to name the fields with the same name address is so that I can retrieve the values like this

bash

export const create = (data: FormData) => {
  console.log(JSON.stringify(data.getAll("address")));
};

Expected behavior

Only the second element (with the empty value) should be marked with data-invalid=true.

Source: radix-ui/primitives

View original on GitHub View discussion on GitHub