Cannot mix and match file and non-file inputs under the…

Error message

Cannot mix and match file and non-file inputs under the same name ("${element.name}")

What it means

In dev mode, SvelteKit inspects all inputs sharing a form control's name when a remote form is submitted. If some inputs with that name are type=file and others are not, the FormData serialization would be inconsistent between enhanced and native submissions, so it throws. This check only runs when DEV is true.

Solutions

Give the file input a unique name distinct from non-file inputs
Ensure every input sharing a given name has the same type (all file or all non-file)
Remove the duplicate conditional input and use one input whose type/accept changes instead

Example fix

// before
<input name="attachment" type="text" />
{#if mode === 'upload'}
  <input name="attachment" type="file" />
{/if}
// after
<input name="attachment" type="text" />
{#if mode === 'upload'}
  <input name="attachment-file" type="file" />
{/if}

Defensive patterns

Strategy: validation

Validate before calling

function hasMixedInputTypes(form, name) {
  const els = Array.from(form.querySelectorAll(`[name="${name}"]`));
  return els.some((e) => e.type === 'file') && els.some((e) => e.type !== 'file');
}
// call before submit; if true, rename inputs

Type guard

const isFileInput = (el) => el instanceof HTMLInputElement && el.type === 'file';

Prevention

Keep one input per name in remote forms
Never reuse a name across file and non-file inputs
Test enhanced forms in dev mode where this DEV check runs

When it happens

Trigger: Calling a remote form's submit/handle_input while the rendered <form> has multiple input elements sharing one name where at least one is type="file" and at least one is not (e.g. a file input rendered conditionally alongside a text input with the same name).

Common situations: Conditionally rendering either a text or a file input under the same name; copying a name attribute across fields; dynamic forms where field type changes based on state.

Related errors

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/7fea69530f1e8714. Report an issue: GitHub.

Appendix: source

Thrown at packages/kit/src/runtime/client/remote-functions/form.svelte.js:525

				const is_file = element.type === 'file';

				if (field.is_array) {
					let value;

					if (element.tagName === 'SELECT') {
						value = Array.from(
							element.querySelectorAll('option:checked'),
							(e) => /** @type {HTMLOptionElement} */ (e).value
						);
					} else {
						const elements = /** @type {HTMLInputElement[]} */ (
							Array.from(form.querySelectorAll(`[name="${name}"]`))
						);

						if (DEV) {
							for (const e of elements) {
								if ((e.type === 'file') !== is_file) {
									throw new Error(
										`Cannot mix and match file and non-file inputs under the same name ("${element.name}")`
									);
								}
							}
						}

						value = is_file
							? elements.map((input) => Array.from(input.files ?? [])).flat()
							: elements.map((element) => element.value);
						if (element.type === 'checkbox') {
							value = /** @type {string[]} */ (value.filter((_, i) => elements[i].checked));
						}
					}

					set_nested_value(input, field, is_file ? value : coerce_form_value(field.type, value));
				} else if (is_file) {
					if (DEV && element.multiple) {
						throw new Error(

View on GitHub (pinned to 03f1687fe6)