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.
