Building a Login Form with Formik, Material-UI, and Yup in React

Formik, Material-UI, and Yup are popular libraries in the React ecosystem that provide developers with powerful tools for building forms, UI components, and form validation.

Formik simplifies form management by handling form state, validation, and submission, while Material-UI offers a set of pre-designed UI components for building visually appealing interfaces.

Yup is a schema validation library that makes it easy to define validation rules for form data. When used together, Formik, Material-UI, and Yup can greatly streamline the process of building complex forms with validation in React applications.

In this article, we will explore how to use Formik with Material-UI and Yup to build a robust and user-friendly login form in a React application.

Formik Material UI Login Form Validation

Prerequisites

Before we dive into the implementation, make sure you have the following prerequisites in place:

1. Familiarity with React and basic understanding of form concepts.
2. A basic understanding of Formik, Material-UI, and Yup libraries.
3. Node.js and npm (Node Package Manager) installed on your machine.
4. A React application set up with Formik, Material-UI, and Yup installed as dependencies.

Step 1: Install Formik, Material-UI, and Yup

First, let’s install the necessary dependencies for Formik, Material-UI, and Yup in your React application. Open your terminal and run the following commands:

npm install formik @mui/material @emotion/react @emotion/styled yup

Step 2: Import the Required Dependencies

Next, you need to import the necessary dependencies in your React component. You can do this by adding the following import statements at the top of your component file:

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { TextField, Button } from '@mui/material';
import * as Yup from 'yup';

Step 3: Define Formik Login Form with Yup Validation

Now, you can define your Formik login form using the <Formik> component and add Yup validation to it. The validation rules are defined using a Yup schema, which you can pass as a prop to the <Formik> component using the validationSchema prop. Here's an example:

import React from 'react';
import {Form, Formik} from 'formik';
import {Button, TextField} from '@mui/material';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid email')
        .required('Email is required'),
    password: Yup.string().required('Password is required'),
});

const LoginForm = () => {

    const handleFormSubmit = (values: any)=> {
        // Handle form submission
        console.log(values);
        // do api call
    }

    return (
        <Formik
            initialValues={{email: '', password: ''}}
            validationSchema={validationSchema}
            onSubmit={handleFormSubmit}
        >
            {({
                  handleSubmit,
                  touched,
                  errors,
                  handleChange,
                  handleBlur
              }) => (
                <Form onSubmit={handleSubmit}>
                    <TextField
                        label="Email"
                        variant="outlined"
                        name="email"
                        fullWidth
                        required
                        onChange={handleChange}
                        onBlur={handleBlur}
                        error={Boolean(touched.email && errors.email)}
                        helperText={touched.email && errors.email}
                        sx={{mb: 2}}
                    />
                    <TextField
                        label="Password"
                        variant="outlined"
                        name="password"
                        type="password"
                        fullWidth
                        required
                        onChange={handleChange}
                        onBlur={handleBlur}
                        error={Boolean(touched.password && errors.password)}
                        helperText={touched.password && errors.password}
                        sx={{mb: 2}}
                    />
                    <Button type="submit" variant="contained" color="primary" fullWidth>
                        Login
                    </Button>
                </Form>
            )}
        </Formik>
    );
};


export default LoginForm;

Step 4: Handle Form Submission

To handle the form submission, we pass a callback function to the onSubmit prop of the <Formik> component. This function will be called when the form is submitted and passes the form values as its parameter. Here's an example of how you can handle the form submission:

const handleFormSubmit = (values: any)=> {
        // Handle form submission
        console.log(values);
        // do api call
    }

In this example, the form values are logged to the console, but you can modify this callback function to send the form data to a server for authentication or perform any other action as needed.

Conclusion:

In this article, we’ve seen how to use Formik, Material-UI, and Yup to build a login form with form validation in a React application. Formik simplifies form management, Material-UI provides pre-designed UI components, and Yup enables easy form validation with schema-based rules. By combining these powerful libraries, you can create robust and user-friendly forms with validation in your React applications. Happy coding!

You can clone the complete source code