diff --git a/.changeset/honest-actors-arrive.md b/.changeset/honest-actors-arrive.md new file mode 100644 index 000000000000..17412ab29587 --- /dev/null +++ b/.changeset/honest-actors-arrive.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': minor +--- + +breaking: remove `buttonProps` from experimental remote form functions; use e.g. `` button instead diff --git a/documentation/docs/20-core-concepts/60-remote-functions.md b/documentation/docs/20-core-concepts/60-remote-functions.md index 5b14aa0bc738..0e0b7e68e752 100644 --- a/documentation/docs/20-core-concepts/60-remote-functions.md +++ b/documentation/docs/20-core-concepts/60-remote-functions.md @@ -813,37 +813,56 @@ Some forms may be repeated as part of a list. In this case you can create separa {/each} ``` -### buttonProps +### Multiple submit buttons -By default, submitting a form will send a request to the URL indicated by the `
` element's [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#attributes_for_form_submission) attribute, which in the case of a remote function is a property on the form object generated by SvelteKit. +It's possible for a `` to have multiple submit buttons. For example, you might have a single form that allows you to log in or register depending on which button was clicked. -It's possible for a ` - + +
``` -Like the form object itself, `buttonProps` has an `enhance` method for customizing submission behaviour. +In your form handler, you can check which button was clicked: + +```js +/// file: $lib/auth.js +import * as v from 'valibot'; +import { form } from '$app/server'; + +export const loginOrRegister = form( + v.object({ + username: v.string(), + _password: v.string(), + action: v.picklist(['login', 'register']) + }), + async ({ username, _password, action }) => { + if (action === 'login') { + // handle login + } else { + // handle registration + } + } +); +``` ## command diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index 01e4f8cf9eb9..167cb42b40aa 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -2031,30 +2031,6 @@ export type RemoteForm = { get pending(): number; /** Access form fields using object notation */ fields: Input extends void ? never : RemoteFormFields; - /** Spread this onto a `