---
title: Form Component
description: "Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation."
url: "https://nextjs.org/docs/15/app/api-reference/components/form"
version: 15.5.15
lastUpdated: 2025-06-16
prerequisites:
  - "API Reference: /docs/15/app/api-reference"
  - "Components: /docs/15/app/api-reference/components"
---


The `<Form>` component extends the HTML `<form>` element to provide  **client-side navigation** on submission, and **progressive enhancement**.

It's useful for forms that update URL search params as it reduces the boilerplate code needed to achieve the above.

Basic usage:

## Reference

The behavior of the `<Form>` component depends on whether the `action` prop is passed a `string` or `function`.

### `action` (string) Props

### Caveats

* **`onSubmit`**: Can be used to handle form submission logic. However, calling `event.preventDefault()` will override `<Form>` behavior such as navigating to the specified URL.
* **[`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method), [`encType`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype), [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target)**: Are not supported as they override `<Form>` behavior.
  * Similarly, `formMethod`, `formEncType`, and `formTarget` can be used to override the `method`, `encType`, and `target` props respectively, and using them will fallback to native browser behavior.
  * If you need to use these props, use the HTML `<form>` element instead.
* **`<input type="file">`**: Using this input type when the `action` is a string will match browser behavior by submitting the filename instead of the file object.
---

For an index of all available documentation, see [/docs/15/llms.txt](/docs/15/llms.txt)