shadcn forms with react-hook-form

Short answer: install react-hook-form, zod and @hookform/resolvers, declare the schema, and mount Form with useForm. Each FormField wires the input, the error message and the ARIA attributes.

The schema before the form

import { z } from "zod";

export const signupSchema = z.object({
  email: z.email(),
  password: z.string().min(12, "Almeno 12 caratteri"),
});

export type SignupValues = z.infer;

The schema does two jobs: it validates values at runtime and produces the SignupValues type at compile time. The resolver turns the Zod result into the shape react-hook-form expects, so errors arrive already tied to their field.

The complete form

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { signupSchema, type SignupValues } from "./schema";

export function SignupForm() {
  const form = useForm({
    resolver: zodResolver(signupSchema),
    defaultValues: { email: "", password: "" },
    mode: "onBlur",
  });

  return (
    
       console.log(values))} noValidate>
         (
            
              Email
              
                
              
              
            
          )}
        />
        Crea account
      
    
  );
}

Three details hold it together: Form publishes the form context, FormControl adds aria-invalid and aria-describedby when there is an error, and FormMessage prints the message only while that field is invalid.

What FormField does for you

• One render per keystroke: the field updates itself, not the whole form, because Controller subscribes to a single name.
• Accessible wiring: label, description and error reach the input through generated ids, so a screen reader reads them.
• Typed state: control knows the SignupValues type, and a wrong field name becomes a compile error.

The command

npx shadcn@latest add form input button
npm install react-hook-form zod @hookform/resolvers

Live records in the catalogue

Compare the result with records already published: the shadcn library, the form-layout-01 block with labels and columns, and the form blocks category. Every record names its licence and source.

The limitation

The schema validates in the browser, not on the server: run the same rule there, or a hand-built request skips it. The form also mounts with noValidate, so native browser validation stays off and the only messages are the ones you write.

Where to continue

Component installation is in how to install shadcn/ui; the same validation on the server is in Server Actions and validation; the comparison between form libraries is in React form libraries. For the styling tokens read how to theme shadcn/ui.