Create Form in Client Component

In this tutorial, you will learn to create a form in the Client component.

Forms are very important in a web application, like a registration form, a login form, etc.

In Next.js, when you need interactivity (typing, validation, input state), you must use a Client Component.

Client Components are required for the Form.

useState()
onChange, onSubmit handlers.
Dynamic UI updates

How to Create a Form in a Client Component?


"use client";
import { useState } from "react";

export default function ContactForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        placeholder="Enter name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Why Forms Need Client Components?

There are below points to clarify why Forms need client components.

When we need React state management.
When needed, Real-time validation.
When needed, Input formatting.
When needed, Conditional UI.

Note: When we use a CRUD (Create/Read/Update/Delete) operation, then should not use the Client Component.