Dynamic and recursive forms with Formik and TypeScript


Formik is a popular tool that helps us write React forms and keep their code consistent across even big projects. Besides having a fixed number of properties, we sometimes need to allow the user to shape the form to some extent and create recursive data structures. In this article, we learn how to do that with Formik and build the following form:

Defining the basics of our form

Let’s start with defining our data structure. The crucial thing about our form is that it is recursive.

If you want to know more about recursion, check out Using recursion to traverse data structures. Execution context and the call stack


We add the property above to use with the key prop.

First, we need to create the entry point that uses the component to initialize our form.


Above, I’m using SCSS modules to style this simple component.

We initiate the form with simple values for this demonstration and log them when the user clicks on the submit button.


Creating an elementary text input

In this article, we create a form that has text inputs. Because of that, we need to create a component to handle them.


Above, we use the function to interact with Formik. If you want to know more, go to Building forms using Formik with the React Hooks API and TypeScript

Our is very simple to use. We need to provide it with the path to a form field we want it to use.

Accessing nested properties of the form

To access a nested property of an object, we can use the function provided by Formik. It returns a value based on the provided path.

The function works very similarly to the function provided by Lodash.

Since we need a full path to access a particular property, we have to keep track of how deep we are in our form. Because of that, our has the property.


Some of the possible values for the prefix prop that the uses are the following:

  • an empty string

To access the array of properties, we need to get the form values first. To do that, we can use the hook.

Paired with the , we can use the above to access a particular array of properties.

The crucial thing to notice above is that we use the value when mapping the array of properties. Thanks to that, we can set the correct prefix.

Modifying the array of properties

To add or remove properties, we need to modify the right array.  To do that, we can use the function provided by the hook. It uses the path of the property in the same way the function does.

Adding properties

We can use the library to generate unique ids when adding a new property. To do that, we can install it with npm.


Removing properties

We can delete an element from the array using a given index to remove a property. When put together, our hook likes like that:



In this article, we’ve gone through the idea of creating dynamic, recursive forms with Formik and TypeScript. When doing that, we had to use various hooks provided by Formik to access and modify the data directly. We’ve also used the that Formik exposes, but it is not thoroughly documented. That knowledge helped us create a fully functional flow that allows the user to add and remove fields.

Notify of
Inline Feedbacks
View all comments