Black Lives Matter. Support Equal Justice.

Getting Started

Getting Started

Before we jump right into code, you might want to learn a little bit about the philosophy and origin story of React Final Form.


npm install --save final-form react-final-form


yarn add final-form react-final-form


React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.

By default, React Final Form subscribes to all changes, but if you want to fine tune your form to optimized blazing-fast perfection, you may specify only the form state that you care about for rendering your gorgeous UI. You can think of it a little like GraphQL's feature of only fetching the data your component needs to render, and nothing else.


Here's what it looks like in your code:

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

const MyForm = () => (
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
          <label>First Name</label>
          <Field name="firstName" component="input" placeholder="First Name" />

        <h2>An Arbitrary Reusable Input Component</h2>
          <Field name="interests" component={InterestPicker} />

        <h2>Render Function</h2>
          render={({ input, meta }) => (
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}

        <h2>Render Function as Children</h2>
        <Field name="phone">
          {({ input, meta }) => (
              <input type="text" {...input} placeholder="Phone" />
              {meta.touched && meta.error && <span>{meta.error}</span>}

        <button type="submit">Submit</button>

Let's explore the API...