React Hook Form Tutorial: Build Your First Employee Registration Form with Material UI

-

Introduction

Forms are one of the most important parts of any web application. Whether you're developing a hospital management system, banking portal, employee management application, or an e-commerce website, forms are used to collect user information.

A simple registration form may contain several types of input fields such as:

  • Text Fields
  • Email Fields
  • Password Fields
  • Date Pickers
  • Dropdown Lists
  • Radio Buttons
  • Checkboxes
  • Image Upload
  • Camera Capture

Managing these fields manually using useState becomes difficult as the application grows. React Hook Form simplifies form management by reducing boilerplate code, improving performance, and making forms easier to maintain.

In this article, we'll build a reusable Employee Registration Form using React Hook Form and Material UI. Instead of sending data to an API, we'll print the submitted values to the browser console. This keeps the focus on understanding how React Hook Form works before integrating it with a backend.




📚 React Forms Mastery Series

Part 1: Building Reusable Forms with React Hook Form ← Current

Part 2: Understanding useForm() and EmployeeRegistrationForm.jsx

Part 3: Creating a Reusable TextField

Part 4: Creating a Reusable Date Picker

Part 5: Creating a Reusable Dropdown

Part 6: Image Upload

Part 7: Camera Capture

Part 8: FormProvider & useFormContext

Part 9: TanStack Query Integration

Prerequisites

Before getting started, you should have:

  • Basic knowledge of React
  • Node.js installed
  • A React project created using Vite or Create React App
  • Material UI installed
  • React Hook Form installed

Install React Hook Form:

npm install react-hook-form

Install Material UI:

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

Project Structure

src/

 components/
     form/
         RHFTextField.jsx
         RHFDatePicker.jsx
         RHFSelect.jsx
         RHFImageUpload.jsx

 pages/
     EmployeeForm.jsx

 App.jsx

Notice that every field has its own reusable component. This approach keeps the code organized and makes it easy to reuse the same field across multiple forms.

Understanding React Hook Form

Before writing any code, let's understand the core concepts.

The useForm() hook is the heart of React Hook Form. It creates and manages the form state, handles validation, and processes form submissions.

When you call useForm(), it returns several useful methods such as:

  • register
  • handleSubmit
  • control
  • watch
  • reset
  • setValue
  • getValues
  • formState

In this article, we'll primarily use:

  • register
  • handleSubmit
  • control
  • FormProvider

I'll explore the remaining methods in future articles.

Creating the Employee Registration Form

Our form will include the following fields:

FieldComponent
First NameTextField
Last NameTextField
EmailTextField
Mobile NumberTextField
Date of BirthDate Picker
GenderDropdown
DepartmentDropdown
Profile PictureImage Upload

At the end of the form, we'll add a Submit button. When clicked, the entered values will be displayed in the browser console.

Creating Text Fields

A text field is the most commonly used input element. It allows users to enter short pieces of information such as names, email addresses, phone numbers, and employee IDs.

Each text field should have:

  • A descriptive label
  • A unique name
  • Placeholder text (optional)
  • Validation rules

In React Hook Form, every field must have a unique name. This name becomes the key in the submitted form data.

For example, if a field is registered with the name firstName, the submitted data will look like:

{
  "firstName": "Sulochana"
}

We'll use Material UI's TextField component together with React Hook Form's register() method to connect the input to the form.

(Then include your reusable RHFTextField component with code and explain each prop like name, label, required, type, register, error, etc.)

Creating a Date Picker

Date pickers provide a user-friendly way to select dates without manually typing them. They help prevent formatting errors and improve the user experience.

Common use cases include:

  • Date of Birth
  • Joining Date
  • Appointment Date
  • Expiry Date

Unlike a standard text field, Material UI's Date Picker is a controlled component. Because of this, React Hook Form integrates it using the Controller component.

In this section, we'll build a reusable date picker that accepts props such as name, label, and validation rules.

(Then include your RHFDatePicker code and explain why Controller is used.)

Creating Dropdowns

Dropdowns allow users to choose a value from a predefined list. They reduce typing errors and ensure consistent data.

Typical examples include:

  • Gender
  • Department
  • Country
  • State
  • Designation

Our reusable dropdown component will receive:

  • name
  • label
  • options

The selected value will be managed by React Hook Form and included automatically in the submitted data.

(Then show RHFSelect and explain each prop.)

Creating an Image Upload Component

Image uploads are commonly used for profile pictures, identity verification, and document submission.

Our reusable image upload component will:

  • Accept image files
  • Display a preview
  • Validate file type and size
  • Store the selected file in the form data

For this introductory article, we'll focus on selecting the image and printing its details to the console.

Handling Form Submission

React Hook Form uses the handleSubmit() method to process form data.

When the user clicks the Submit button, the form is validated. If all validations pass, the submitted values are passed to the onSubmit function.

For now, we'll simply print the values:

const onSubmit = (data) => {
  console.log(data);
};

Open your browser's Developer Tools and navigate to the Console tab. After submitting the form, you'll see an object containing all the entered values.

Why FormProvider?

As forms grow larger, passing register, control, and other methods as props to every component becomes repetitive. This approach, known as prop drilling, makes components harder to maintain.

FormProvider solves this by making all React Hook Form methods available to child components through React Context. Instead of passing props manually, reusable components can access the form methods directly using useFormContext().

In the next article, we'll refactor the form to use FormProvider, making our components cleaner, more reusable, and easier to scale in enterprise applications.


How To Write The Code:

// EmployeeRegistrationForm.jsx

import React from "react";
import {
  Grid,
  Paper,
  Typography,
  Button,
  Box
} from "@mui/material";
import { FormProvider, useForm } from "react-hook-form";
// Reusable Components
import RHFTextField from "../components/form/RHFTextField";
import RHFDatePicker from "../components/form/RHFDatePicker";
import RHFSelect from "../components/form/RHFSelect";
import RHFImageUpload from "../components/form/RHFImageUpload";
const genderOptions = [
  { label: "Male", value: "Male" },
  { label: "Female", value: "Female" },
  { label: "Other", value: "Other" }
];
const departmentOptions = [
  { label: "Development", value: "Development" },
  { label: "Testing", value: "Testing" },
  { label: "HR", value: "HR" },
  { label: "Finance", value: "Finance" }
];
export default function EmployeeRegistrationForm() {
  const methods = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      mobile: "",
      dob: null,
      gender: "",
      department: "",
      profileImage: null
    }
  });
  const { handleSubmit } = methods;
  const onSubmit = (data) => {
    console.log("Employee Data");
    console.log(data);
  };
  return (
    <FormProvider {...methods}>
      <Paper
        elevation={3}
        sx={{
          maxWidth: 950,
          mx: "auto",
          mt: 5,
          p: 4
        }}
      >
        <Typography
          variant="h4"
          fontWeight="bold"
          mb={4}
        >
          Employee Registration Form
        </Typography>
        <Box
          component="form"
          onSubmit={handleSubmit(onSubmit)}
        >
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <RHFTextField
                name="firstName"
                label="First Name"
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFTextField
                name="lastName"
                label="Last Name"
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFTextField
                name="email"
                label="Email"
                type="email"
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFTextField
                name="mobile"
                label="Mobile Number"
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFDatePicker
                name="dob"
                label="Date of Birth"
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFSelect
                name="gender"
                label="Gender"
                options={genderOptions}
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFSelect
                name="department"
                label="Department"
                options={departmentOptions}
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <RHFImageUpload
                name="profileImage"
                label="Profile Picture"
              />
            </Grid>
            <Grid item xs={12}>
              <Button
                variant="contained"
                type="submit"
                fullWidth
                size="large"
              >
                Submit
              </Button>
            </Grid>
          </Grid>
        </Box>
      </Paper>
    </FormProvider>
  );
}

Conclusion

In this article, we created the foundation of an Employee Registration Form using React Hook Form and Material UI. We set up the project, designed the form layout, added commonly used form fields, and configured form submission to print the entered values in the browser console. This provides a solid starting point for building scalable and maintainable React forms.

In the next article, we'll explore the EmployeeRegistrationForm.jsx component in detail. We'll understand how useForm(), defaultValues, handleSubmit(), and onSubmit() work together to manage form state and handle form submissions effectively. After that, we'll start building reusable form components such as RHFTextField, RHFDatePicker, RHFSelect, and RHFImageUpload, eventually integrating them with FormProvider, useFormContext(), and TanStack Query for production-ready applications.


👉 How to Create a React Component in React.js – A Beginner's Guide
https://sulochanabasavala.blogspot.com/2026/04/react-basics-how-to-create-component.html

"Ready for the next step? Check out our next guide: https://sulochanabasavala.blogspot.com/2026/10/advanced-react-hook-form-custom-async-validation.html"

Happy Learning....

Comments

Post a Comment

Popular posts from this blog

React Basics – How to Create Component

-
  Introduction (Story) : When I started learning React, I was confused about how components actually work. I saw many examples, but things became clear only when I created my own first component. In this blog, I will explain how to create a simple React component step by step in an easy way. What is a Component in React? A component is a reusable piece of UI in React. It helps in breaking the application into smaller, manageable parts. Tools Required : Node.js React (Create React App / Vite) VS Code  Step 1: Create React App : Run the following command: Where you want create the react project, then we have to create new folder and there you can open the cmd and run below command npx create-react-app my-app Navigate to project folder: cd my-app npm start Step 2: Create Your First Component Create a file named Hello.js import React from 'react' ; function Hello () { return <h1> Hello, Welcome to React! </h1> ; } export default Hello ; Step 3: ...
Read more

How to Build REST API using Spring Boot (Step-by-Step Guide)

-
Introduction  (Story + Experience)  : When I started learning Spring Boot, I found REST APIs a bit confusing. I watched multiple tutorials, but I didn’t fully understand how backend systems actually work. Things became clear when I tried building a simple REST API on my own. In this blog, I will share the same step-by-step process that helped me understand REST APIs in a practical way. What is REST API? A REST API allows communication between frontend and backend systems using HTTP methods like GET, POST, PUT, and DELETE. In real-world applications, REST APIs are used to send and receive data between client and server. Tools Required  : - Java - Spring Boot - IntelliJ / VS Code - Postman Step 1: Create Spring Boot Project  : Go to Spring Initializr and create a project with the following dependencies: - Spring Web - Spring Data JPA - PostgreSQL Driver Step 2: Create Controller  : @RestController @RequestMapping("/api") public class HelloController {   ...
Read more

Spring Boot @RequestParam Annotation Explained with Real-Time Examples

-
Image
 Introduction : As a Java Full Stack Developer, I have worked on several Spring Boot applications where APIs needed to receive data from users. One annotation that I frequently used in REST APIs is @RequestParam . In many real-world applications, users need to search, filter, sort, or paginate data. For example, an employee management system may allow users to search employees by department, status, or employee ID. In such cases, @RequestParam provides a simple and efficient way to pass data from the client to the server through URL query parameters. When I started learning Spring Boot, I often got confused between @RequestParam , @PathVariable , and @RequestBody . However, after working on multiple projects, I understood the purpose of each annotation and when to use them effectively. In this article, I will explain the @RequestParam annotation with practical examples, project use cases, common mistakes, best practices, and interview questions. What is @RequestParam? The @Reques...
Read more