MENU

Form

The <Form> component enhances the standard HTML <form> element by enabling features such as prefetching loading UI, client-side navigation upon submission, and progressive enhancement.

When the action attribute is set to a string, the <Form> behaves like a standard HTML form using the GET method. Form data is encoded as search parameters in the URL, and upon submission, it navigates to the specified URL. Unlike traditional forms, it performs client-side navigation, avoiding a full page reload and preserving shared UI elements and client-side state.

When 'action' is a server action, the 'replace', 'scroll', and 'prefetch' props are ignored.

formAction: Overrides the action prop when used in <button> or <input type="submit"> fields. Next.js performs client-side navigation, but this does not support prefetching. If using a basePath, include it in the formAction path (e.g., formAction="/base-path/search").

key: Passing a key prop to a string action is unsupported. For triggering re-renders or performing mutations, use a function action instead.

onSubmit: Handles form submission logic. Calling event.preventDefault() will override <Form> behavior, such as navigation to the specified URL.

method, encType, target: These are not supported as they conflict with <Form> behavior.
Alternatively, you can use formMethod, formEncType, and formTarget to override these props. However, doing so reverts to native browser behavior.
Use the HTML <form> element instead if these are needed.

<input type="file">: When action is a string, this matches browser behavior by submitting the file name rather than the file object.