sveltejs/kit · error

A form object can only be attached to a single `<form>` elem

Error message

A form object can only be attached to a single `<form>` element. To create multiple instances, use `${name}.for(key)` (dev)

What it means

Each remote form instance can be attached to exactly one <form> element; binding the same form object to multiple elements would make its state (message, dirty, submitting) ambiguous. In DEV the error appends guidance to use form.for(key) to create per-key instances.

Source

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

		}

		const instance = /** @type {RemoteForm<T, U>} */ ({});

		instance.method = 'POST';
		Object.defineProperty(instance, 'action', {
			get: get_action,
			enumerable: true
		});

		instance[createAttachmentKey()] = (/** @type {HTMLFormElement} */ form) => {
			if (element) {
				let message = `A form object can only be attached to a single \`<form>\` element`;
				if (DEV && !key) {
					const name = id.split('/').pop();
					message += `. To create multiple instances, use \`${name}.for(key)\``;
				}

				throw new Error(message);
			}

			element = form;

			touched = {};
			dirty = {};
			can_validate = {};

			/** @param {SubmitEvent} event */
			const handle_submit = async (event) => {
				const form = /** @type {HTMLFormElement} */ (event.target);
				const method = event.submitter?.hasAttribute('formmethod')
					? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formMethod
					: clone(form).method;

				if (method !== 'post') return;

				const action = new URL(

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Create keyed instances with myForm.for(item.id) for each rendered form
2. Instantiate the form per component rather than sharing a module-level object
3. Ensure each <form> element binds to its own form instance

Example fix

// before
{#each items as item}
  <form use:deleteForm>...</form>
{/each}
// after
{#each items as item}
  {@const f = deleteForm.for(item.id)}
  <form use:f>...</form>
{/each}

// ensure one instance per <form>: create keyed instances before binding
const forms = new Map();
function formFor(base, key) {
  if (!forms.has(key)) forms.set(key, base.for(key));
  return forms.get(key);
}

try { attach(form, element); } catch (e) { if (e.message.includes('single `<form>` element')) { const keyed = form.for(uniqueKey); attach(keyed, element); } else { throw e; } }

When it happens

Trigger: Using the same remote form function result in two <form use:form...> elements on one page (e.g. rendering the form in a list without keys); sharing a module-level form object across components.

Common situations: Rendering a form component inside {#each} for multiple items; reusing one imported form object in a header and a modal; refactor extracting a form into a shared module.

Related errors

• Could not get the request store.
• Cannot export `default` from a remote module (${file}) — ple
• `${name}` exported from ${file} is invalid — all exports fro
• use:enhance can only be used on <form> fields with method="P
• Your form contains <input type="file"> fields, but is missin

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