Getting Started

Join the author of Final Form at ReactEurope to learn how to build Modern Forms in React

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