React Final Form

In the interest of making checkered_flag React Final Form the best library it can be, we'd love your thoughts and feedback.

✅ Zero dependencies

✅ Only peer dependencies: React and
? Final Form

✅ Opt-in subscriptions - only update on the state you need!

✅ ? 2.9k gzipped ?


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


yarn add react-final-form final-form

Getting Started

? 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, pristine, invalid }) => (
      <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" disabled={pristine || invalid}>