vitest-dev/vitest · error · Error

Multiple form elements with the same name must be of the sam

Error message

Multiple form elements with the same name must be of the same type

What it means

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.

Source

Thrown at packages/browser/src/client/tester/expect/toHaveFormValues.ts:72

        commonKeyValues[key] = formValues[key]
      }

      return [
        this.utils.matcherHint(matcher, 'element', ''),
        `Expected the element ${to} have form values`,
        this.utils.diff(expectedValues, commonKeyValues),
      ].join('\n\n')
    },
  }
}

// Returns the combined value of several elements that have the same name
// e.g. radio buttons or groups of checkboxes
function getMultiElementValue(elements: HTMLInputElement[]) {
  let type = ''
  for (const element of elements) {
    if (type && type !== element.type) {
      throw new Error(
        'Multiple form elements with the same name must be of the same type',
      )
    }
    type = element.type
  }
  switch (type) {
    case 'radio': {
      const selected = elements.find(radio => radio.checked)
      return selected ? selected.value : undefined
    }
    case 'checkbox':
      return elements
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.value)
    default:
      // NOTE: Not even sure this is a valid use case, but just in case...
      return elements.map(element => element.value)
  }

View on GitHub (pinned to d568f8ce37)

Solutions

1. Inspect the rendered HTML and find all elements sharing the offending `name`; rename one group so names are unique per type.
2. 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`).
3. If you intended a radio group, ensure every element with that name is `type="radio"` with distinct `value`s.

Example fix

// before - HTML
<input type="radio" name="contact" value="email">
<input type="checkbox" name="contact" value="phone">

// after
<input type="radio" name="contactMethod" value="email">
<input type="checkbox" name="contactMethods[]" value="phone">

function assertUniformInputTypes(form: HTMLFormElement | HTMLFieldSetElement) {
  const byName = new Map<string, Set<string>>()
  for (const el of form.elements) {
    if (!(el instanceof HTMLInputElement)) continue
    const set = byName.get(el.name) ?? new Set<string>()
    set.add(el.type)
    byName.set(el.name, set)
  }
  for (const [name, types] of byName) if (types.size > 1) throw new Error(`name '${name}' has mixed types: ${[...types].join(', ')}`)
}

When it happens

Trigger: 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`.

Common situations: 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.

Related errors

• toHaveFormValues must be called on a form or a fieldset, ins
• toHaveFormValues must be called with an object of expected f
• input with type=checkbox or type=radio cannot be used with .
• received value must ${expectedString} or a Locator that retu
• Element not found: ${v.element}

AI-assisted analysis of vitest-dev/vitest@d568f8ce37 (2026-08-03). Data as JSON: /data/errors/c0121e01f1a2ef91.json. Report an issue: GitHub.