Form
Within a Hydrogen app, React Server Components are used to fetch data and API routes are used to mutate data. The Form component provides a declarative way to send data to API routes and re-render server components. The Form component mimics the functionality of a native <form> element, but it provides an enhanced user experience with client-side JavaScript.
Example code
Anchor link to section titled "Example code"
The Form component shares the same props that are available to the native <form> element with the following additions:
| Name | Type | Description |
|---|---|---|
| action | string |
The path to the API route that the form submits to. The API route must respond with a new Request(). |
| encType? | string |
The MIME type of the form submission. multipart/form-data is not yet supported. |
| onSubmit? | Function |
A callback to intercept a submission event. The form doesn't submit if event.preventDefault() is called. |
| children? | ReactNode or ({loading, error}) => ReactNode |
Either pass any ReactNode, or a function that returns a ReactNode. That function will receive loading and error parameters. loading is true while forms are being submitted. error is populated when there's an error communicating with the server. |
Component type
Anchor link to section titled "Component type"The Form component is a client component, so it renders on the client. For more information about component types, refer to React Server Components.