Forms are one of the most important parts of modern web applications. Almost every application requires users to enter and submit information.

Common examples include:

• Login Form
• Registration Form
• Contact Form
• Checkout Form
• Profile Form
• Settings Form

Handling forms manually becomes difficult as applications grow, so React developers commonly use dedicated form libraries.

In this module, you'll learn about:

• Formik
• React Hook Form
• Validation Libraries
• Zod

Throughout this course, we will primarily focus on React Hook Form.

What is Form Handling?

Form handling is the process of collecting, validating, and submitting user input.

A complete form usually involves:

• Capturing User Input
• Managing Form State
• Validating Data
• Displaying Error Messages
• Submitting Data

Example:

<form>

    <input
        type="email"
    />

    <input
        type="password"
    />

    <button>

        Login

    </button>

</form>

Although this looks simple, real-world forms often contain dozens of fields and complex validation.

Challenges in Forms

As forms become larger, they become harder to manage.

A registration form may include:

• Name
• Email
• Password
• Confirm Password
• Phone Number
• Address
• Date of Birth

In addition, developers need to handle:

• Validation Rules
• Error Messages
• Loading States
• Form Reset
• Form Submission

Managing all of this manually quickly becomes complicated.

This is why form libraries exist.

Popular React Form Libraries

Some of the most popular React form libraries are:

• Formik
• React Hook Form

For validation, developers commonly use:

• Zod
• Yup
• Valibot

Today, the most common combination is:

React Hook Form
        +
Zod

Formik

Formik is one of the oldest and most popular React form libraries.

It simplifies:

• Form State
• Validation
• Error Handling
• Form Submission

Installing Formik

npm install formik

Basic Formik Example

import {

    Formik,

    Form,

    Field

}
from "formik";

function LoginForm() {

    return (

        <Formik

            initialValues={{

                email: ""

            }}

            onSubmit={
                values => {

                    console.log(
                        values
                    );

                }
            }

        >

            <Form>

                <Field
                    name="email"
                />

                <button>

                    Submit

                </button>

            </Form>

        </Formik>

    );

}

Advantages of Formik

Formik offers:

• Simple API
• Good Documentation
• Mature Ecosystem
• Wide Community Support

Limitations of Formik

Compared to modern alternatives, Formik has some drawbacks:

• More Boilerplate
• More Component Re-renders
• Larger Bundle Size

Because of these reasons, many modern React projects prefer React Hook Form.

React Hook Form

React Hook Form (RHF) is a modern form library built specifically for React Hooks.

It focuses on performance and simplicity.

React Hook Form provides:

• Better Performance
• Less Boilerplate
• Easy Validation
• Minimal Re-renders
• Excellent Developer Experience

Why React Hook Form?

A traditional React form often looks like this:

const [email, setEmail] =
useState("");

const [

    password,

    setPassword

] = useState("");

Each input requires its own state.

As forms become larger, managing dozens of state variables becomes difficult.

React Hook Form solves this problem.

Installing React Hook Form

npm install react-hook-form

Creating a Form

Import the hook:

import {

    useForm

}
from "react-hook-form";

Create the form:

const {

    register,

    handleSubmit

} = useForm();

Complete React Hook Form Example

function LoginForm() {

    const {

        register,

        handleSubmit

    } = useForm();

    const onSubmit =
    data => {

        console.log(data);

    };

    return (

        <form

            onSubmit={
                handleSubmit(
                    onSubmit
                )
            }

        >

            <input

                {...register(
                    "email"
                )}

            />

            <button>

                Submit

            </button>

        </form>

    );

}

How register() Works

The register() function connects an input element to React Hook Form.

Example:

<input

    {...register(
        "email"
    )}

/>

When the form is submitted, React Hook Form automatically collects the value.

Example Submission

User enters:

samir@gmail.com

Submitted data:

{
    email:
    "samir@gmail.com"
}

Multiple Fields

<input

    {...register(
        "email"
    )}

/>

<input

    {...register(
        "password"
    )}

/>

Submitted result:

{
    email:
    "samir@gmail.com",

    password:
    "123456"
}

Validation

Validation ensures users enter correct and meaningful data.

Validation helps prevent:

• Empty Fields
• Invalid Emails
• Weak Passwords
• Incorrect Data

Required Validation

<input

    {...register(

        "email",

        {

            required:
            "Email is required"

        }

    )}

/>

If the user leaves the field empty, React Hook Form displays the specified error message.

Accessing Errors

const {

    register,

    handleSubmit,

    formState: {

        errors

    }

} = useForm();

Display the error:

{

    errors.email &&

    <p>

        {
            errors.email.message
        }

    </p>

}

Email Validation

<input

    {...register(

        "email",

        {

            required:
            "Email required",

            pattern: {

                value:

                /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

                message:

                "Invalid email"

            }

        }

    )}

/>

This validates that the input follows a proper email format.

Minimum Length Validation

<input

    {...register(

        "password",

        {

            minLength: {

                value: 6,

                message:
                "Minimum 6 characters"

            }

        }

    )}

/>

Combined Validation Example

<input

    {...register(

        "username",

        {

            required:
            "Username required",

            minLength: {

                value: 3,

                message:
                "Minimum 3 characters"

            }

        }

    )}

/>

Common Validation Rules

Custom Validation

<input

    {...register(

        "age",

        {

            validate:
            value =>

                value >= 18 ||

                "Must be 18+"

        }

    )}

/>

Custom validation allows developers to define their own validation logic.

React Hook Form Workflow

User Input
      │
      ▼
register()
      │
      ▼
Validation
      │
      ▼
Errors
      │
      ▼
Submit

React Hook Form + Shadcn UI

A very common modern stack is:

React
      │
      ▼
React Hook Form
      │
      ▼
Shadcn UI
      │
      ▼
Validation

Example:

<FormField

    control={form.control}

    name="email"

    render={({ field }) => (

        <Input

            {...field}

        />

    )}

 />

This integrates Shadcn UI components with React Hook Form.

Validation Libraries

React Hook Form handles form state, but validation is often performed using dedicated validation libraries.

Popular choices include:

• Zod
• Yup
• Valibot

Among these, Zod is the most commonly used.

Zod

Zod is a schema validation library.

It allows developers to define validation rules in one reusable schema.

Install Zod:

npm install zod

Zod Schema Example

import { z }
from "zod";

const schema =
z.object({

    email:
    z.string().email(),

    password:
    z.string().min(6)

});

This schema validates:

• Email format
• Password length

Why Use Zod?

Zod provides:

• Type Safety
• Reusable Validation Rules
• Backend-Friendly Schemas
• Excellent TypeScript Support

It integrates very well with React Hook Form.

Formik vs React Hook Form

React Hook Form is now the preferred choice for most modern React applications.

Recommended Form Stack

The recommended stack throughout this course is:

React
      │
      ▼
React Hook Form
      │
      ▼
Zod Validation
      │
      ▼
Shadcn UI

This combination provides:

• Fast Forms
• Easy Validation
• Excellent Performance
• Clean Code

Best Practices

Use React Hook Form

Prefer React Hook Form over manually managing dozens of useState() variables.

Validate All User Input

Always validate:

• Required Fields
• Email Addresses
• Password Length
• Numeric Values

Use Zod for Schemas

Keep validation logic separate from UI by defining reusable Zod schemas.

Display Helpful Error Messages

Instead of:

Invalid Input

Use:

Email is required

Password must contain at least 6 characters

This improves user experience.

Keep Forms Organized

For larger forms, separate:

• UI Components
• Validation Schemas
• Submission Logic

This makes forms easier to maintain.

Summary

Key Takeaway

Several form libraries exist for React, including Formik, but modern React applications primarily use:

React Hook Form
        │
        ▼
Validation
        │
        ▼
Shadcn UI

This combination provides excellent performance, simple APIs, and modern development patterns.

A typical form workflow looks like this:

User Input
      │
      ▼
React Hook Form
      │
      ▼
Validation
      │
      ▼
Submit Data
      │
      ▼
API Request

Mastering React Hook Form and validation libraries such as Zod enables you to build robust, user-friendly forms for authentication, registration, checkout, settings, and many other real-world applications.