react-final-form
Advanced tools
react-final-form is a framework-agnostic form state management library for React. It provides a simple and flexible way to manage form state, validation, and submission handling in React applications.
Form State Management
This feature allows you to manage the state of your form fields. The code sample demonstrates a simple form with two fields, 'firstName' and 'lastName', and a submit button. The form state is managed and displayed in real-time.
const MyForm = () => (
<Form
onSubmit={formValues => {
console.log(formValues);
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
<div>
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
);Field-Level Validation
This feature allows you to add validation to individual fields. The code sample shows how to add a 'required' validation to the 'firstName' and 'lastName' fields.
const required = value => (value ? undefined : 'Required');
const MyForm = () => (
<Form
onSubmit={formValues => {
console.log(formValues);
}}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" validate={required} />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" validate={required} />
</div>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
)}
/>
);Form-Level Validation
This feature allows you to add validation to the entire form. The code sample demonstrates how to validate the 'firstName' and 'lastName' fields at the form level.
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}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
)}
/>
);Formik is a popular form library for React that provides a higher-level API for managing form state, validation, and submission. It is similar to react-final-form but offers more built-in hooks and components for easier integration.
React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, making it a lightweight alternative to react-final-form with a focus on performance.
Redux Form is a form state management library that integrates with Redux. It is similar to react-final-form but is more tightly coupled with Redux, making it suitable for applications that already use Redux for state management.
✅ Zero dependencies
✅ Only peer dependencies: React and 🏁 Final Form
✅ Opt-in subscriptions - only update on the state you need!
✅ 💥 2.9k gzipped 💥
In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.
npm install --save react-final-form final-form
or
yarn add react-final-form 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 = () => (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, pristine, invalid }) => (
<form onSubmit={handleSubmit}>
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<Field name="firstName" component="input" placeholder="First Name" />
</div>
<h2>An Arbitrary Reusable Input Component</h2>
<div>
<label>Interests</label>
<Field name="interests" component={InterestPicker} />
</div>
<h2>Render Function</h2>
<Field
name="bio"
render={({ input, meta }) => (
<div>
<label>Bio</label>
<textarea {...input} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
/>
<h2>Render Function as Children</h2>
<Field name="phone">
{({ input, meta }) => (
<div>
<label>Phone</label>
<input type="text" {...input} placeholder="Phone" />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
</Field>
<button type="submit" disabled={pristine || invalid}>
Submit
</button>
</form>
)}
/>
)
FieldProps
allowNull?: booleanchildren?: ((props: FieldRenderProps) => React.Node) | React.Nodecomponent?: React.ComponentType<FieldRenderProps> | stringformat?: ((value: any, name: string) => any) | nullisEqual?: (a: any, b: any) => booleanname: stringparse?: ((value: any, name: string) => any) | nullrender?: (props: FieldRenderProps) => React.Nodesubscription?: FieldSubscriptionvalidate?: (value: ?any, allValues: Object) => ?anyvalidateFields?: string[]value?: anyFieldRenderProps
input.name: stringinput.onBlur: (?SyntheticFocusEvent<*>) => voidinput.onChange: (SyntheticInputEvent<*> | any) => voidinput.onFocus: (?SyntheticFocusEvent<*>) => voidinput.value: anymeta.active?: booleanmeta.data: Objectmeta.dirty?: booleanmeta.error?: anymeta.initial?: anymeta.invalid?: booleanmeta.pristine?: booleanmeta.submitError?: anymeta.submitFailed?: booleanmeta.submitSucceeded?: booleanmeta.touched?: booleanmeta.valid?: booleanmeta.visited?: booleanFormProps
children?: ((props: FormRenderProps) => React.Node) | React.Nodecomponent?: React.ComponentType<FormRenderProps>debug?: DebugFunctiondecorators?: Decorator[]initialValues?: Objectmutators?: { [string]: Mutator }onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | voidrender?: (props: FormRenderProps) => React.Nodesubscription?: FormSubscriptionvalidate?: (values: Object) => Object | Promise<Object>validateOnBlur?: booleanFormRenderProps
FormSpyProps
FormSpyRenderProps
Uses the built-in React inputs: input, select, and textarea to build a
form with no validation.
Introduces a whole-record validation function and demonstrates how to display errors next to fields using child render functions.
Introduces field-level validation functions and demonstrates how to display errors next to fields using child render functions.
Demonstrates how field-level validation rules may be asynchronous (return a
Promise), as well as how to show a "validating" spinner during the lifetime of
the Promise.
Demonstrates how you can mix synchronous and asynchronous validation patterns at
the record-level, by returning errors synchronously, and falling back to an
asynchronous call (by returning a Promise) if sync validation is passing.
Demonstrates how to return submission errors from failed submits. Notice that
the Promise should resolve to the submission error (not reject). Rejection
is reserved for communications or server exceptions.
Demonstrates how easy it is to use third party input components. All the third
party component really needs is value and onChange, but more complex
components can accept things like errors.
Demonstrates how to use Material-UI 1.0 input components.
Demonstrates how, by restricting which parts of form state the form component
needs to render, it reduce the number of times the whole form has to rerender.
Yet, if some part of form state is needed inside of it, the
FormSpy component can be used to
attain it.
Demonstrates how to make an independent Error component to subscribe to and display the error for any form field.
Demonstrates how a form can be initialized, after fetching data, by passing in
initialValues as a prop.
Demostrates how to use the <FieldArray/> component, from
react-final-form-arrays,
to render an array of inputs, as well as use push, pop, and remove
mutations.
Demonstrates how to use the
final-form-calculate
decorator to achieve realtime field calculations through easily defined rules.
Demonstrates how the power of subscriptions and mutators can be used to build a warning engine: logic to display a message next to each field that is not an error that prevents form submission.
Demonstrates how fields can be grouped into reusable components.
Demonstrates how you can use document.getElementById() or a closure to trigger
a submit from outside of the form. For more information, see
How can I trigger a submit from outside the form?
Demonstrates how to use 🏁 React Final Form to create a multi-page "wizard" form, with validation on each page.
Demonstrates how to use 🏁 React Final Form's parse and format props to control exactly how the data flows from the form state through the input and back to the form state. Notice that you can use parse to "normalize" your values.
Demonstrates how to use a FormSpy component to listen for value changes and automatically submit different values after a debounce period.
Demonstrates how to use a FormSpy component to listen for values and active field changes to automatically submit values when fields are blurred.
Demonstrates how incredibly extensible FormSpy, the setFieldData mutator, and render props are by implementing a custom validation engine completely apart from the built-in validation in 🏁 Final Form, thus allowing for special behaviors, like only validating a single field when that field is blurred.
Demonstrates how to make a wrapper component to handle loading, normalization of data, saving, and reinitializing of the form, to maintain pristine/dirty state with saved data.
Demonstrates how to use a 🏎️ Downshift type-ahead component as an input.
The only reason to keep your 🏁 Final Form form data in Redux is if you need to be able to read it from outside your form. This example demonstrates how to use a FormSpy to keep a copy of your form data in the Redux store. Note that the canonical authoritative version of the data still lives in 🏁 Final Form. If you need to mutate your data via dispatching Redux actions, you should probably use Redux Form.
Sometimes you might want to conditionally show or hide some parts of your form depending on values the user has already provided for other form inputs. 🏁 React Final Form makes that very easy to do by creating a Condition component out of a Field component.
By wrapping a stateful ExternalModificationDetector component in a Field component, we can listen for changes to a field's value, and by knowing whether or not the field is active, deduce when a field's value changes due to external influences.
Demonstrates how to incorporate the 🏁 Final Form Focus 🧐 decorator to provide this functionality out of the box.
Demonstrates how to make an awesome credit card UX using React Credit Cards.
Want to use redux-saga or redux-observable to manage your form submissions? Now you can, using react-redux-promise-listener to convert your dispatched Redux actions into the Promise that 🏁 React Final Form is expecting for its onSubmit function.
What if you could define rules to update fields when other fields change as components? This example explores such possibilities. There's also a Medium post about writing it, and creating a companion library, react-final-form-listeners.
There are three ways to tell <Form/> and <Field/> what to render:
| Method | How it is rendered |
|---|---|
component prop | return React.createElement(this.props.component, props) |
render prop | return this.props.render(props) |
a render function as children | return this.props.children(props) |
The following can be imported from react-final-form.
Field : React.ComponentType<FieldProps>A component that takes FieldProps and renders an individual
field.
Form : React.ComponentType<FormProps>A component that takes FormProps and surrounds your entire form.
FormSpy : React.ComponentType<FormSpyProps>A component that takes FormSpyProps and can listen to form
state from inside an optimized <Form/>.
version: stringThe current used version of 🏁 React Final Form.
FieldPropsThese are props that you pass to
<Field/>. You must provide one of the
ways to render: component, render, or children.
allowNull?: booleanBy default, if your value is null, <Field/> will convert it to '', to
ensure
controlled inputs.
But if you pass true to allowNull, <Field/> will give you a null value.
Defaults to false.
children?: ((props: FieldRenderProps) => React.Node) | React.NodeA render function that is given FieldRenderProps, as well
as any non-API props passed into the <Field/> component.
component?: React.ComponentType<FieldRenderProps> | stringA component that is given FieldRenderProps as props, as
well as any non-API props passed into the <Field/> component.
format?: ((value: any, name: string) => any) | nullA function that takes the value from the form values and the name of the field and formats the value to give to the input. Common use cases include converting javascript Date values into a localized date string. Almost always used in conjunction with parse.
Note: If you pass null to format, it will override the default behavior of converting undefined into ''. If you do this, making sure your inputs are "controlled" is up to you.
isEqual?: (a: any, b: any) => booleanSee the 🏁 Final Form docs on isEqual.
name: stringThe name of your field. Field values may be deeply nested using dot-and-bracket syntax. Learn more about Field Names.
parse?: ((value: any, name: string) => any) | nullA function that takes the value from the input and name of the field and converts the value into the value you want stored as this field's value in the form. Common usecases include converting strings into Numbers or parsing localized dates into actual javascript Date objects. Almost always used in conjuction with format.
Note: If you pass null to parse, it will override the default behavior of converting '' into undefined, thus allowing you to have form values of ''.
render?: (props: FieldRenderProps) => React.NodeA render function that is given FieldRenderProps, as well
as any non-API props passed into the <Field/> component.
subscription?: FieldSubscriptionA
FieldSubscription
that selects all of the items of
FieldState that you
wish to update for. If you don't pass a subscription prop, it defaults to
all of FieldState.
validate?: (value: ?any, allValues: Object) => ?anyA function that takes the field value, and all the values of the form and
returns an error if the value is invalid, or undefined if the value is valid.
validateFields?: string[]See the 🏁 Final Form docs on validateFields.
value?: anyThis is only used for checkboxes radio buttons!
checked if and only if the value given here === the value for the field in the form.value is specified: the checkbox will be checked if the value given in value is contained in the array that is the value for the field for the form. Checking the box will add the value to the array, and unchecking the checkbox will remove the value from the array.value is specified: the checkbox will be checked if the value is truthy. Checking the box will set the value to true, and unchecking the checkbox will set the value to false.FieldRenderPropsThese are the props that <Field/>
provides to your render function or component. This object separates out the
values and event handlers intended to be given to the input component from the
meta data about the field. The input can be destructured directly into an
<input/> like so: <input {...props.input}/>. Keep in mind that the values
in meta are dependent on you having subscribed to them with the
subscription prop
input.name: stringThe name of the field.
input.onBlur: (?SyntheticFocusEvent<*>) => voidThe onBlur function can take a SyntheticFocusEvent like it would if you had
given it directly to an <input/> component, but you can also just call it:
props.input.onBlur() to mark the field as blurred (inactive).
input.onChange: (SyntheticInputEvent<*> | any) => voidThe onChange function can take a SyntheticInputEvent like it would if you
had given it directly to an <input/> component (in which case it will read the
value out of event.target.value), but you can also just call it:
props.input.onChange(value) to update the value of the field.
input.onFocus: (?SyntheticFocusEvent<*>) => voidThe onFocus function can take a SyntheticFocusEvent like it would if you had
given it directly to an <input/> component, but you can also just call it:
props.input.onFocus() to mark the field as focused (active).
input.value: anyThe current value of the field.
meta.active?: booleanSee the 🏁 Final Form docs on active.
meta.data: ObjectSee the 🏁 Final Form docs on data.
meta.dirty?: booleanSee the 🏁 Final Form docs on dirty.
meta.error?: anySee the 🏁 Final Form docs on error.
meta.initial?: anySee the 🏁 Final Form docs on initial.
meta.invalid?: booleanSee the 🏁 Final Form docs on invalid.
meta.pristine?: booleanSee the 🏁 Final Form docs on pristine.
meta.submitError?: anySee the 🏁 Final Form docs on submitError.
meta.submitFailed?: booleanSee the 🏁 Final Form docs on submitFailed.
meta.submitSucceeded?: booleanSee the 🏁 Final Form docs on submitSucceeded.
meta.touched?: booleanSee the 🏁 Final Form docs on touched.
meta.valid?: booleanSee the 🏁 Final Form docs on valid.
meta.visited?: booleanSee the 🏁 Final Form docs on visited.
FormPropsThese are the props that you pass to
<Form/>. You must provide one of the
ways to render: component, render, or children.
children?: ((props: FormRenderProps) => React.Node) | React.NodeA render function that is given FormRenderProps, as well
as any non-API props passed into the <Form/> component.
component?: React.ComponentType<FormRenderProps>A component that is given FormRenderProps as props, as
well as any non-API props passed into the <Form/> component.
debug?: DebugFunctionSee the 🏁 Final Form docs on debug.
decorators?: Decorator[]Decorators
to apply to the form.
initialValues?: ObjectSee the 🏁 Final Form docs on initialValues.
mutators?: { [string]: Mutator }See the 🏁 Final Form docs on mutators.
onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | voidSee the 🏁 Final Form docs on onSubmit.
render?: (props: FormRenderProps) => React.NodeA render function that is given FormRenderProps, as well
as any non-API props passed into the <Form/> component.
subscription?: FormSubscriptionA
FormSubscription
that selects all of the items of
FormState that you wish
to update for. If you don't pass a subscription prop, it defaults to all of
FormState.
validate?: (values: Object) => Object | Promise<Object>See the 🏁 Final Form docs on validate.
validateOnBlur?: booleanSee the 🏁 Final Form docs on validateOnBlur.
FormRenderPropsThese are the props that <Form/>
provides to your render function or component. Keep in mind that the values you
receive here are dependent upon which values of
FormState you have
subscribed to with the
subscription prop.
This object contains everything in
🏁 Final Form's FormState
as well as:
batch: (fn: () => void) => void)[DEPRECATED] Use form.batch() instead
A function that allows batch updates to be done to the form state.
See the 🏁 Final Form docs on batch.
blur: (name: string) => void[DEPRECATED] Use form.blur() instead
A function to blur (mark inactive) any field.
change: (name: string, value: any) => void[DEPRECATED] Use form.change() instead
A function to change the value of any field.
focus: (name: string) => void[DEPRECATED] Use form.focus() instead
A function to focus (mark active) any field.
form: FormApiThe 🏁 Final Form FormApi.
handleSubmit: (?SyntheticEvent<HTMLFormElement>) => voidA function intended for you to give directly to the <form> tag: <form onSubmit={handleSubmit}/>.
initialize: (values: Object) => void[DEPRECATED] Use form.initialize() instead
A function that initializes the form values.
See the 🏁 Final Form docs on initialize.
mutators?: { [string]: Function }[DEPRECATED] Use form.mutators instead
See the 🏁 Final Form docs on mutators.
reset: (newInitialValues?: Object) => void[DEPRECATED] Use form.reset() instead
A function that resets the form values to their last initialized values.
See the 🏁 Final Form docs on reset.
FormSpyPropsThese are the props that you pass to
<FormSpy/>. You must provide one
of the ways to render: component, render, or children.
children?: ((props: FormSpyRenderProps) => React.Node) | React.NodeA render function that is given FormSpyRenderProps, as
well as any non-API props passed into the <FormSpy/> component. Will not be
called if an onChange prop is provided.
component?: React.ComponentType<FormSpyRenderProps>A component that is given FormSpyRenderProps as props,
as well as any non-API props passed into the <FormSpy/> component. Will not be
called if an onChange prop is provided.
onChange?: (formState: FormState) => voidA change listener that will be called with form state whenever the form state,
as subscribed to by the subscription prop, has changed. When an onChange
prop is provided, the <FormSpy/> will not render anything.
render?: (props: FormSpyRenderProps) => React.NodeA render function that is given FormSpyRenderProps, as
well as any non-API props passed into the <FormSpy/> component. Will not be
called if an onChange prop is provided.
subscription?: FormSubscriptionA
FormSubscription
that selects all of the items of
FormState that you wish
to update for. If you don't pass a subscription prop, it defaults to all of
FormState.
FormSpyRenderPropsThese are the props that
<FormSpy/> provides to your render
function or component. These props are of type
FormState. Keep in mind
that the values you receive here are dependent upon which values of
FormState you have
subscribed to with the
subscription prop. Also included will be many of the same props provided to FormRenderProps:
batch: (fn: () => void) => void)[DEPRECATED] Use form.batch() instead
A function that allows batch updates to be done to the form state.
See the 🏁 Final Form docs on batch.
blur: (name: string) => void[DEPRECATED] Use form.blur() instead
A function to blur (mark inactive) any field.
change: (name: string, value: any) => void[DEPRECATED] Use form.change() instead
A function to change the value of any field.
focus: (name: string) => void[DEPRECATED] Use form.focus() instead
A function to focus (mark active) any field.
form: FormApiThe 🏁 Final Form FormApi.
initialize: (values: Object) => void[DEPRECATED] Use form.initialize() instead
A function that initializes the form values.
See the 🏁 Final Form docs on initialize.
mutators?: { [string]: Function }[DEPRECATED] Use form.mutators instead
See the 🏁 Final Form docs on mutators.
reset: (newInitialValues?: Object) => void[DEPRECATED] Use form.reset() instead
A function that resets the form values to their last initialized values.
See the 🏁 Final Form docs on reset.
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
FAQs
🏁 High performance subscription-based form state management for React
We found that react-final-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.