{"record":{"id":"c0121e01f1a2ef91","repo":"vitest-dev/vitest","slug":"multiple-form-elements-with-the-same-name-must-be","errorCode":null,"errorMessage":"Multiple form elements with the same name must be of the same type","messagePattern":"Multiple form elements with the same name must be of the same type","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/browser/src/client/tester/expect/toHaveFormValues.ts","lineNumber":72,"sourceCode":"        commonKeyValues[key] = formValues[key]\n      }\n\n      return [\n        this.utils.matcherHint(matcher, 'element', ''),\n        `Expected the element ${to} have form values`,\n        this.utils.diff(expectedValues, commonKeyValues),\n      ].join('\\n\\n')\n    },\n  }\n}\n\n// Returns the combined value of several elements that have the same name\n// e.g. radio buttons or groups of checkboxes\nfunction getMultiElementValue(elements: HTMLInputElement[]) {\n  let type = ''\n  for (const element of elements) {\n    if (type && type !== element.type) {\n      throw new Error(\n        'Multiple form elements with the same name must be of the same type',\n      )\n    }\n    type = element.type\n  }\n  switch (type) {\n    case 'radio': {\n      const selected = elements.find(radio => radio.checked)\n      return selected ? selected.value : undefined\n    }\n    case 'checkbox':\n      return elements\n        .filter(checkbox => checkbox.checked)\n        .map(checkbox => checkbox.value)\n    default:\n      // NOTE: Not even sure this is a valid use case, but just in case...\n      return elements.map(element => element.value)\n  }","sourceCodeStart":54,"sourceCodeEnd":90,"githubUrl":"https://github.com/vitest-dev/vitest/blob/1fa9837ec26533512fdcad8baebf249771bd340a/packages/browser/src/client/tester/expect/toHaveFormValues.ts#L54-L90","documentation":"Thrown internally by `getMultiElementValue` inside `toHaveFormValues` when a form contains two or more elements sharing the same `name` attribute but with different `type` values (e.g. a checkbox and a text input both named `choice`). The matcher groups same-named elements to compute a combined value (radio → selected value, checkboxes → array of checked values); mixing types makes that aggregation ambiguous, so it aborts rather than silently returning a wrong value.","triggerScenarios":"A `<form>`/`<fieldset>` where two elements share `name=\"foo\"` but one is `<input type=\"checkbox\" name=\"foo\">` and the other is `<input type=\"text\" name=\"foo\">`, then calling `expect(form).toHaveFormValues({ foo: ... })`. Also triggered by a radio group mixed with a non-radio input of the same name.","commonSituations":"Shared `name` collisions from copy-pasted inputs; legacy forms reusing a name for different control types; frameworks that auto-generate names; testing a form whose markup is genuinely invalid for the matcher's grouping model.","solutions":["Rename one of the colliding inputs so each `name` maps to a single control type.","Split the expectation: query each element directly with a Locator and assert with `toHaveValue` / `toBeChecked` instead of aggregating via `toHaveFormValues`.","If a list of values is intended, use a single control type (e.g. multiple `type=\"checkbox\"` with `name=\"items[]\"`).","Inspect the form markup with the browser inspector and confirm every duplicated `name` has the same `type`."],"exampleFix":"<!-- before -->\n<input type=\"checkbox\" name=\"choice\" />\n<input type=\"text\" name=\"choice\" />\n\n<!-- after -->\n<input type=\"checkbox\" name=\"choice\" />\n<input type=\"checkbox\" name=\"choice-alt\" />","handlingStrategy":"validation","validationCode":"// verify each duplicated name maps to a single input type before asserting\nfunction assertNoMixedTypes(form: HTMLFormElement) {\n  const byName = new Map<string, Set<string>>()\n  for (const el of form.elements) {\n    if ('name' in el && el.name) {\n      const types = byName.get(el.name) ?? new Set<string>()\n      types.set((el as HTMLInputElement).type ?? el.tagName)\n      byName.set(el.name, types)\n      if (types.size > 1) throw new Error(`name '${el.name}' used by mixed input types`)\n    }\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use distinct `name` attributes per control type.","For value lists, use one control type (e.g. multiple checkboxes with `name[]`).","When a name must be shared, assert with element-level matchers instead of `toHaveFormValues`."],"tags":["matcher","form","browser","dom"],"backgroundTag":null,"analyzedSha":"1fa9837ec26533512fdcad8baebf249771bd340a","analyzedAt":"2026-08-11T16:11:39.638Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}