Sponsor
Black Lives Matter. Support Equal Justice.

Examples


Examples


Wanna help? We need to migrate all of these examples from CodeSandbox to here. PRs to help with that process would be greatly appreciated. πŸ™


Simple Example

Uses the built-in React inputs: input, select, and textarea to build a form with no validation.

Synchronous Record-Level Validation

Introduces a whole-record validation function and demonstrates how to display errors next to fields using child render functions.

Synchronous Field-Level Validation

Introduces field-level validation functions and demonstrates how to display errors next to fields using child render functions.

Synchronous Record-Level Validation (with delayed error render)

Sometimes you want to give your user a chance to make it through a brief invalid value on their way to a valid one, e.g. a date string that needs two numbers on either side of a slash. With a simple delayed rendering component, this becomes easy. Plus, the error will disappear immediately when the user fixes the problem.

Asynchronous Field-Level Validation

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.

Hybrid Synchronous/Asynchronous Record-Level Validation

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.

Submission Errors

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.

Third Party Components

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.

Material-UI

πŸ’₯ Performance Optimization Through Subscriptions πŸ’₯

Demonstrates how, by restricting which parts of form state the form component needs to render, it reduces 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.

Strongly Typed Form and Field Values with TypeScript

Demonstrates how to use JSX generics to strongly type fields, forcing only a component that can accept the type for that field.

Independent Error Component (with Render Props)

Demonstrates how to make an independent Error component to subscribe to and display the error for any form field.

Independent Error Component (with Hooks)

Demonstrates how to make an independent Error component, using Hooks, to subscribe to and display the error for any form field.

Loading and Initializing Values

Demonstrates how a form can be initialized, after fetching data, by passing in initialValues as a prop.

Field Arrays

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.

Fields Component

Wondering how to get field state from multiple fields at once?

People coming from Redux-Form might be wondering where the equivalent of Redux Form's Fields component is, as a way to get state from several fields at once. The answer is that it's not included in the library because it's so easy to write one recursively composing Field components together.

Calculated Fields

Demonstrates how to use the final-form-calculate decorator to achieve realtime field calculations through easily defined rules.

Field Warnings

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 (thus it does not prevent form submission).

Reusable Field Groups

Demonstrates how fields can be grouped into reusable components.

Prefixed Fields

Demonstrates how the React context API can be used to provide a "prefix wrapper" around fields to add structure to your form date. It's similar to how Redux Form's FormSection component works. Between this and the Reusable Field Groups example, your use case, if migrating from FormSection should be handled.

External Submit

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?

Wizard Form

Demonstrates how to use React Final Form to create a multi-page "wizard" form, with validation on each page.

Parse and Format (and Normalize)

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.

Auto-Save with Debounce

Demonstrates how to use a FormSpy component to listen for value changes and automatically submit different values after a debounce period.

Auto-Save with Selective Debounce

Demonstrates how to use a FormSpy component to listen for value changes and automatically submit different values after a debounce period, but only does the debounce for certain specified fields, in this case, all the text fields.

Auto-Save on Field Blur

Demonstrates how to use a FormSpy component to listen for values and active field changes to automatically submit values when fields are blurred.

Custom Validation Engine

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.

Loading, Normalizing, Saving, and Reinitializing

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.

🏎️ Downshift Type-Ahead

Demonstrates how to use a 🏎️ Downshift type-ahead component as an input.

Redux Example

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.

Conditional Fields

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.

Listening for External Changes

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.

Focus On First Error

Demonstrates how to incorporate the 🏁 Final Form Focus 🧐 decorator to provide this functionality out of the box.

Credit Card Example

Demonstrates how to make an awesome credit card UX using React Credit Cards.

Async Redux Submission

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.

Declarative Form Rules

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.

Format String By Pattern

Demonstrates how to use the library format-string-by-pattern to create input masks for your 🏁 React Final Form fields.

AsyncTypeahead and Redux

Demonstrates creating an AsyncTypeahead to select github users, while storing the search results in the redux store and the form state (selected github users) via react-final-form. Also makes use of the setFieldData mutator.

Format On Blur

Demonstrates how to use the formatOnBlur prop to postpone the formatting of a form field value until the field loses focus. Very useful for formatting numbers, like currencies.

Styling with 🍭 Smooth-UI

Demonstrates how to use the Smooth-UI styling library to make your forms look fabulous! All you really need is a higher order component that adapts The 🍭 Smooth-UI form controls to work with 🏁 React Final Form.

Styling with Chakra-UI

Demonstrates how to use the Chakra UI styling library to make your forms look fabulous!

CLI Example 🀯

Yes! You can actually use 🏁 React Final Form in a command line interface! Thanks to packages like Ink and Pastel, the power of 🏁 Final Form's form state management works just fine on the command line.