Viewing docs for an older release. View latest
Form
On this page

<Form>

A progressively enhanced HTML <form> wrapper, useful for submissions that should also change the URL or otherwise add an entry to the browser history stack. For forms that shouldn't manipulate the browser history stack, use <fetcher.Form>.

import { Form } from "@remix-run/react";

function NewEvent() {
  return (
    <Form action="/events" method="post">
      <input name="title" type="text" />
      <input name="description" type="text" />
    </Form>
  );
}

Props

action

The URL to submit the form data to.

If undefined, this defaults to the closest route in context. If a parent route renders a <Form> but the URL matches deeper child routes, the form will post to the parent route. Likewise, a form inside the child route will post to the child route. This differs from a native <form> that will always point to the full URL.

method

This determines the HTTP verb to be used: DELETE, GET, PATCH, POST, and PUT. The default is GET.

<Form method="post" />

Native <form> only supports GET and POST, so you should avoid the other verbs if you'd like to support progressive enhancement

encType

The encoding type to use for the form submission.

<Form encType="multipart/form-data" />

Defaults to application/x-www-form-urlencoded, use multipart/form-data for file uploads.

preventScrollReset

If you are using <ScrollRestoration>, this lets you prevent the scroll position from being reset to the top of the window when the form is submitted.

<Form preventScrollReset />

replace

Replaces the current entry in the history stack, instead of pushing the new entry.

<Form replace />

reloadDocument

If true, it will submit the form with the browser instead of client side routing. The same as a native <form>.

<Form reloadDocument />

This is recommended over <form>. When the action prop is omitted, <Form> and <form> will sometimes call different actions depending on what the current URL is since <form> uses the current URL as the default, but <Form> uses the URL for the route the form is rendered in.

Notes

?index

Because index routes and their parent route share the same URL, the ?index param is used to differentiate between them.

<Form action="/accounts?index" method="post" />
action url route action
/accounts?index app/routes/accounts._index.tsx
/accounts app/routes/accounts.tsx

See also:

Additional Resources

Videos:

Related Discussions:

Related APIs:

Docs and examples licensed under MIT