API

The API for React Final Form consists of three components and three hooks:

Components

<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.

<Field/>

A component that lives inside your <Form/> and creates a "field". It register itself with the surrounding <Form/> tag and manages all the state for a particular field, providing input callbacks (e.g. onBlur, onChange, and onFocus) as well as the value of the form and myriad metadata about the state of the field.

<FormSpy/>

[Advanced Usage] A component that can tap into form-wide state from inside your <Form/>. It's primarily only for advanced usage when form renders are being restricted via the subscription prop.

Hooks

useField()

A hook that will convert any of your components into a <Field/> component, registering with the surrounding <Form/> and providing field state to your component. useField() is used internally by <Field/>.

useForm()

A hook that will pluck the Final Form form instance out of context.

useFormState()

A hook that will convert any of your components into a <FormSpy/> component, allowing fine-grained control over subscribing to parts of the form state.