Photo by Joshua Woroniecki on Unsplash

Handle Form with React Hook Form

React Form

React Hook Form is library that you can use to handle form in react. This can help you to do like validation and dynamic form. this story will show how to use this library.

Step 1: Create New App

Create new T3 app:

npm create t3-app@latest

Step 2: Install Dependency

Install React Hook Form:

npm install react-hook-form

Step 3: Build UI

1. Create new page on src/pages/form.tsx

UI Form

import type { FC } from "react";

type InputType = {
    id: string,
    title: string,
    type?: string,
    placeholder?: string
}

export default function FormPage() {
    return <>
        <div className="w-full h-screen flex items-center justify-center">
            <form>
                <div className="flex flex-col gap-3">
                    <Headline title="Form"/>
                    <Form/>
                    
                    <button 
                      type="submit" 
                      className="border-2 border-teal-300 bg-teal-400…