feat: Reset form programmatically by sillvva · Pull Request #14779 · sveltejs/kit

sillvva · 2025-10-21T12:53:10Z

Implements a form.reset() method that clears the form values, issues, result, submitted, and touched states. In addition, the dev is provided options to not reset certain parts, and the ability to reset the form to new values.

Includes SSR support, so the dev could also use form.reset({ values: { ... } }) in the script block instead of form.fields.set({ ... }) if they wanted to. One advantage is that it allows a DeepPartial<Input> type, instead of requiring the whole object. Unlike .set() this method is only for the base path.

Demo

export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
	...
	/** Reset the form to its initial state */
	reset(options?: {
		/**
		 * Set this to the new values to reset the form to.
		 * Set this to `false` to not reset the values.
		 * @default true
		 */
		values?: DeepPartial<Input> | boolean;
		/** Set this to `false` to not reset the issues. */
		issues?: boolean;
		/** Set this to `false` to not reset the result. */
		result?: boolean;
		/** Set this to `false` to not reset the touched fields. */
		touched?: boolean;
	}): void;
};

It does provide an alternative solution to this issue too:

When navigating to a new page and back on the client, the values (input), issues, and result are not reset. Looking into this, I see that the instance is only deleted on submit if the form has a key from .for(key). This PR would give developers the ability to reset without using .for().

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.

Tests

Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

changeset-bot · 2025-10-21T12:53:15Z

🦋 Changeset detected

Latest commit: 314c665

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

svelte-docs-bot · 2025-10-21T12:53:54Z

Preview: https://svelte-dev-git-preview-kit-14779-svelte.vercel.app/

teemingc · 2026-02-25T10:53:04Z

+		 * Set this to the new values to reset the form to.
+		 * Set this to `false` to not reset the values.


Suggested change

* Set this to the new values to reset the form to.

* Set this to `false` to not reset the values.

* Resets the form's values if `true` or sets new ones if an object is passed instead .

teemingc · 2026-02-25T10:54:17Z

+		 * @default true
+		 */
+		values?: DeepPartial<Input> | boolean;
+		/** Set this to `false` to not reset the issues. */


Suggested change

/** Set this to `false` to not reset the issues. */

/**

* Resets the form's issues if `true`.

* @default true

*/

teemingc · 2026-02-25T10:56:33Z

+		values?: DeepPartial<Input> | boolean;
+		/** Set this to `false` to not reset the issues. */
+		issues?: boolean;
+		/** Set this to `false` to not reset the result. */


Suggested change

/** Set this to `false` to not reset the result. */

/**

* Resets the form's submission results if `true`.

* @default true

*/

teemingc · 2026-02-25T10:57:26Z

+		issues?: boolean;
+		/** Set this to `false` to not reset the result. */
+		result?: boolean;
+		/** Set this to `false` to not reset the touched fields. */


Suggested change

/** Set this to `false` to not reset the touched fields. */

/**

* Resets each form field's touched state if `true`.

* @default true

*/

teemingc · 2026-02-25T10:59:53Z

 				submit().then(() => {
 					if (!issues.$) {
-						form.reset();
+						instance.reset({ result: false });


Suggested change

instance.reset({ result: false });

instance.reset();

I think we should continue to reset the values after a successful submission as before

If so, we should be able to configure that. For example, in a search form: you do not want the search query to be cleared or to need to repopulate it with the previous value after submission.

Hmm. I figured something like https://svelte.dev/docs/kit/form-actions#GET-vs-POST would be good enough where you'd use a query + GET action form but maybe it's not? (you'd lose all the niceties of the form remote function such as validation if needed)

teemingc · 2026-02-25T11:02:43Z

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { test } from './form.remote.js';
+	test.reset({ values: { value: 'hi' } });


Suggested change

test.reset({ values: { value: 'hi' } });

test.fields.set({ value: 'bye' });

test.reset({ values: { value: 'hi' } });

Wonder if it's worth adding a .set here to help check that it resets those too

teemingc

Thank you! I left a few small comments. Other than that, this should be good to merge.

Rich-Harris · 2026-04-05T17:42:58Z

+- `touched` — Set to `false` to preserve touched field tracking (default is `true`)
+
+```svelte
+<button onclick={() => login.reset({ values: { username: 'guest', password: 'guest' } })}>


I might be missing something but this API feels a bit complicated to me — wouldn't it be better to do this?

<button onclick={() => { login.reset(); login.fields.set({ username: 'guest', password: 'guest' }); }> Login as guest </button>

(In fact in this example I'm not sure I'd bother with login.reset() at all)

Yeah, that wasn't a good example to use.

An instance where this would be used is when you want to reset the form to some default values after submission when the form doesn't redirect.

Also, sometimes when navigating to another page and back, the form does not reset (something the form factory PR was also intended to address). The idea was that if this behavior was intentional, then you could use the .reset() API to clear the form when navigating away from or to the page.

The values option probably could have been simplified to only clear the values. I added the set feature built-in as a nice-to-have option as well.

sillvva added 4 commits October 20, 2025 23:11

feat: reset form programmatically

e0a9ed4

SSR support + test

22a25b9

format

4a3f9da

deep partial

16f8998

sillvva changed the title ~~Form reset~~ Reset form programmatically Oct 21, 2025

sillvva changed the title ~~Reset form programmatically~~ feat: Reset form programmatically Oct 21, 2025

Remove console log

786dbd5

sillvva mentioned this pull request Oct 22, 2025

Allow resetting form based on remote function result. #14787

Closed

Merge branch 'sveltejs:main' into form-reset

92a7a2e

sillvva mentioned this pull request Oct 25, 2025

Remote form() result persists after navigation #14802

Open

Merge branch 'sveltejs:main' into form-reset

8423853

sillvva mentioned this pull request Oct 26, 2025

feat: remote form factory #14815

Open

6 tasks

sillvva added 2 commits October 27, 2025 21:53

move DeepPartial type definition to private.d.ts

a4dd2ec

fix DeepPartial type

8562ffd

hyunbinseo mentioned this pull request Dec 28, 2025

Remote form's automatic reset should clear touched state, etc. #15103

Closed

This comment was marked as duplicate.

Sign in to view

Merge branch 'main' into form-reset

56f4088

This comment was marked as duplicate.

Sign in to view

teemingc added the forms Stuff relating to forms and form actions label Jan 6, 2026

dummdidumm and others added 6 commits February 20, 2026 15:04

Merge branch 'main' into form-reset

31fe641

cleanup

7a9ca9d

lint

7b41df5

remove log

b91c91a

Merge branch 'main' into form-reset

bcd0a32

Merge branch 'main' into form-reset

2035d23

teemingc reviewed Feb 25, 2026

View reviewed changes

teemingc requested changes Feb 25, 2026

View reviewed changes

teemingc added 2 commits February 25, 2026 21:46

Merge branch 'main' into form-reset

9a13fd9

Merge branch 'main' into form-reset

75ff363

teemingc reviewed Feb 25, 2026

View reviewed changes

Comment thread packages/kit/src/exports/public.d.ts Outdated

teemingc and others added 4 commits February 26, 2026 01:29

Apply suggestion from @teemingc

edb67ef

Merge branch 'main' into form-reset

7c82015

merge main

d68c14e

merge main

314c665

Rich-Harris reviewed Apr 5, 2026

View reviewed changes

This comment was marked as duplicate.

Sign in to view

Stadly mentioned this pull request Jun 11, 2026

Remote form fields.value() diverges from submitted FormData — proposal for dev-mode consistency check #16015

Open

		* Set this to the new values to reset the form to.
		* Set this to `false` to not reset the values.

	* Set this to the new values to reset the form to.
	* Set this to `false` to not reset the values.
	* Resets the form's values if `true` or sets new ones if an object is passed instead .

	test.reset({ values: { value: 'hi' } });
	test.fields.set({ value: 'bye' });
	test.reset({ values: { value: 'hi' } });

Uh oh!

Conversation

sillvva commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

It does provide an alternative solution to this issue too:

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Changesets

Edits

Uh oh!

changeset-bot Bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

svelte-docs-bot Bot commented Oct 21, 2025

Uh oh!

This comment was marked as duplicate.

This comment was marked as duplicate.

teemingc Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

kwangure Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

teemingc Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

teemingc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Rich-Harris Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

sillvva Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

sillvva commented Oct 21, 2025 •

edited

Loading

changeset-bot Bot commented Oct 21, 2025 •

edited

Loading

teemingc Feb 25, 2026 •

edited

Loading

teemingc Feb 25, 2026 •

edited

Loading

teemingc Feb 25, 2026 •

edited

Loading

sillvva Apr 6, 2026 •

edited

Loading