<Form/>

import { Form } from 'react-final-form'

A component that surrounds your entire form and manages the form state. It can inject form state and functionality, e.g. a handleSubmit function for you to pass to your <form> element, via render props.

On mount, <Form/> creates a Final Form form instance, subscribes to changes on that form, and places it into the React Context so that the <Field/> and <FormSpy/> components can see it.

The <Form/> will rerender any time the form state it is subscribed to changes. By default it subscribes to all form state. You can control which form state it subscribes to with the subscription prop.

Props

<Form/> accepts FormProps and will call the render function with FormRenderProps.

The only two required props are onSubmit and one of component, render, or children.

Basic Usage

You need to do three things when using <Form/>:

1. Provide an onSubmit prop

onSubmit is a function that will be called with the values of your form when the user submits the form and all validation passes. Your onSubmit function will not be called if there are validation errors.

2. Provide a way to render the form

There are three ways to render a <Form/> component:

Prop	Type
<Form component/>	React.ComponentType
<Form render/>	Function
<Form children/>	Function

The only important distinction is that if you pass a component prop, it will be rendered with React.createElement(), resulting in your component actually being in the React node tree, i.e. inspectable in DevTools.

While using component might feel easiest if you are migrating from Redux Form's Higher Order Component model, best practice recommends using a render prop.

3. Do something with handleSubmit

The most important thing that <Form/> will pass to your render function is the handleSubmit function. handleSubmit is a convenience method designed to be passed as the onSubmit prop to an HTML <form> component. handleSubmit will call event.preventDefault() to stop the default browser submission process.

In practice, your form will always look something like this:

<Form onSubmit={onSubmit}>
  {props => (
    <form onSubmit={props.handleSubmit}>

      ... fields go here...

      <button type="submit">Submit</button>
    </form>
  )}
</Form>

Now, let's look at adding some <Field/> components!