final-form

What is final-form?

Final Form is a framework-agnostic library for managing form state in JavaScript. It provides a simple API for handling form validation, submission, and state management, making it easier to build complex forms with minimal boilerplate code.

What are final-form's main functionalities?

Form State Management

Final Form provides a simple way to manage form state. The `Form` component handles the form submission, while the `Field` component is used to define form fields. The form state is managed internally and can be accessed via the `render` prop.

const { Form, Field } = require('react-final-form');

const MyForm = () => (
  <Form
    onSubmit={formValues => {
      console.log(formValues);
    }}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName" component="input" placeholder="First Name" />
        <Field name="lastName" component="input" placeholder="Last Name" />
        <button type="submit">Submit</button>
      </form>
    )}
  />
);

Validation

Final Form allows you to easily add validation to your forms. The `validate` function is used to define validation rules, and it returns an object containing any validation errors. These errors are then displayed in the form.

const { Form, Field } = require('react-final-form');

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  return errors;
};

const MyForm = () => (
  <Form
    onSubmit={formValues => {
      console.log(formValues);
    }}
    validate={validate}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName" component="input" placeholder="First Name" />
        <Field name="lastName" component="input" placeholder="Last Name" />
        <button type="submit">Submit</button>
      </form>
    )}
  />
);

Field-Level Validation

Final Form supports field-level validation, allowing you to define validation rules for individual fields. The `validate` prop on the `Field` component is used to specify the validation function for that field.

const { Form, Field } = require('react-final-form');

const required = value => (value ? undefined : 'Required');

const MyForm = () => (
  <Form
    onSubmit={formValues => {
      console.log(formValues);
    }}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName" component="input" placeholder="First Name" validate={required} />
        <Field name="lastName" component="input" placeholder="Last Name" validate={required} />
        <button type="submit">Submit</button>
      </form>
    )}
  />
);

Form Submission

Final Form makes it easy to handle form submission. The `onSubmit` prop on the `Form` component is used to define the submission handler, which receives the form values as an argument.

const { Form, Field } = require('react-final-form');

const MyForm = () => (
  <Form
    onSubmit={formValues => {
      console.log('Form submitted with values:', formValues);
    }}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="firstName" component="input" placeholder="First Name" />
        <Field name="lastName" component="input" placeholder="Last Name" />
        <button type="submit">Submit</button>
      </form>
    )}
  />
);

Other packages similar to final-form

formik

Formik is a popular form library for React that provides a higher-level API for managing form state, validation, and submission. It offers more built-in features and integrations compared to Final Form, but it is specifically designed for React applications.

react-hook-form

React Hook Form is a performant, flexible form library for React that leverages hooks for managing form state and validation. It is known for its minimal re-renders and easy integration with existing components, making it a lightweight alternative to Final Form.

redux-form

Redux Form is a form library that integrates with Redux for managing form state. It provides a robust set of features for handling complex form scenarios but can be more complex to set up and use compared to Final Form. It is suitable for applications already using Redux.

README

💰 Hey there! Do you fancy yourself a javascript expert? Take this quiz and get offers from top tech companies! 💰

---

🏁 Final Form

✅ Zero dependencies *

✅ Framework agnostic

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

✅ 💥 5.1k gzipped 💥

---

💬 Give Feedback on Final Form 💬

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

Take a quick survey.

---

Get Started

Philosophy

Examples

API

Companion Libraries

Who's using Final Form?