{"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/d568f8ce3739b532d5bf2c1ee1e45e8a8a473d09/packages/browser/src/client/tester/expect/toHaveFormValues.ts#L54-L90","documentation":"Thrown by `getMultiElementValue` in toHaveFormValues.ts:71-74 when multiple form elements share the same `name` attribute but have different `type` values (e.g. one `radio` and one `checkbox`). The matcher needs a uniform type to decide whether to compute a single selected value (radio), an array of checked values (checkbox), or a generic list.","triggerScenarios":"A form containing `<input type=\"radio\" name=\"x\">` and `<input type=\"checkbox\" name=\"x\">`. Mixing `<input type=\"text\" name=\"x\">` with `<input type=\"radio\" name=\"x\">`. Reusing a `name` across heterogeneous inputs in a fieldset passed to `toHaveFormValues`.","commonSituations":"Copy-paste of input markup that left the same `name` on inputs of different types. Naming a checkbox group and a radio group identically. Accidental duplicate `name` attributes in a large generated form.","solutions":["Inspect the rendered HTML and find all elements sharing the offending `name`; rename one group so names are unique per type.","If you intended a checkbox array, ensure every element with that name is `type=\"checkbox\"` (and consider the `[]` suffix convention the matcher strips via `getPureName`).","If you intended a radio group, ensure every element with that name is `type=\"radio\"` with distinct `value`s."],"exampleFix":"// before - HTML\n<input type=\"radio\" name=\"contact\" value=\"email\">\n<input type=\"checkbox\" name=\"contact\" value=\"phone\">\n\n// after\n<input type=\"radio\" name=\"contactMethod\" value=\"email\">\n<input type=\"checkbox\" name=\"contactMethods[]\" value=\"phone\">","handlingStrategy":"validation","validationCode":"function assertUniformInputTypes(form: HTMLFormElement | HTMLFieldSetElement) {\n  const byName = new Map<string, Set<string>>()\n  for (const el of form.elements) {\n    if (!(el instanceof HTMLInputElement)) continue\n    const set = byName.get(el.name) ?? new Set<string>()\n    set.add(el.type)\n    byName.set(el.name, set)\n  }\n  for (const [name, types] of byName) if (types.size > 1) throw new Error(`name '${name}' has mixed types: ${[...types].join(', ')}`)\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use distinct name attributes per input type within a form.","Follow the [] suffix convention for checkbox arrays so the matcher strips it consistently.","Lint your forms during component development for duplicate names with mixed types."],"tags":["browser","expect-matcher","tohaveformvalues","dom","form-validation"],"analyzedSha":"d568f8ce3739b532d5bf2c1ee1e45e8a8a473d09","analyzedAt":"2026-08-03T20:23:56.861Z","schemaVersion":2}