Digital form in steps with Formik mui and Yup in React

Published in

Allient

4 min readJul 1, 2022

Are forms important?

The collection and analysis of data is an essential part of a project, for which the use of forms is an important tool that allows the acquisition of relevant data.

First, it is important to understand what a form is?

A Form is a document used to collect data in a structured manner, containing empty spaces to fill in by a user. There are physical and digital forms. A digital form is an online form that allows collecting information from users, and generally stores the answers in a database which is later processed and analyzed.
These forms have some benefits compared to the physical ones, which are.

Flexibility to modify the form
Eliminate input errors and data loss
Massive reach
Save time and money

Here you can read more about the benefits of digital forms.

An easy way to make digital forms is by using the Formik library.

Formik mui

Formik is a library created by Jared Palmer that allows us to make forms more simple in React. Formik mui is a library that integrates Formik and MUI. This library allows you to create forms with different types of answers options such as:

TextField
Checkbox
RadioGroup
Switch
Select

Others, here you can read more about this library and packages. formik-mui
To install this library

yarn add formik formik-mui @mui/material @emotion/react @emotion/styled

Formik with multiple steps

A step form is a more user-friendly form, which allows you to segment a long form into small sections, and prevents a user from getting tired of a long form.

Here we go to create a step form with formik.

First, create the functions to make a form in steps, both the function that contains the entire form and the one that contains each step.

In the code there are the following functions

FormikStep: the children of each step of the form are placed.
FormikStepProps: contains the properties of each step, such as the label.

FormikStepper: the function contains the formik and checks if it is in the last step or not, it also has two buttons that will be shown in each step, one to return and another to continue or submit.

Now the form is done. An example with two steps is shown below.

In each step of the form validation can be performed, for this Yup is used. With the Yup library, you can place the different fields to validate that the field is entered and correctly entered, such as the type of data, minimum, maximum, etc.

Also in the code, you can see the use of formik-mui packages such as TextField and RadioButton, to use this it is done inside a Field.

<Field  name="name"  variant="outlined"  component={TextField}  label="Name"/>

initialValues: In this, the variables to be used are placed and their initial value can be placed, also in each Field the name of the variable is related in the name field to save the value.

onSubmit: the function to perform is found by pressing the submit button in the last step.

Example of a step form

Below is a form for calculating an insurance premium, which consists of 8 steps and at the end shows a summary of the information completed. In addition, different types of formik responses are used, such as:

TextFiel
Radio Button
Checkbox
Switch
Selector
Date (DatePicher)
And, input a image (SimpleFileUpload)

The summary shows the image uploaded in the previous step, and the other data entered in the form. A database is also used in airtable.

Please visit my DEMO

This was coded using next.js with Typescript. You can get the code in my GitHub repo.

Thanks for your time reading this post 😃 !!

Feel free to give me your feedback and comments and if you want me to cover another similar topic let me know in the comments.

Do you need some help?

We are ready to listen to you. If you need some help with creating the next big thing, you can contact our team on our website or at info@jrtec.io