Form shadcn con react-hook-form

Risposta breve: installa react-hook-form, zod e @hookform/resolvers, dichiara lo schema e monta Form con useForm. Ogni FormField collega input, messaggio di errore e attributi ARIA.

Lo schema prima del 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;

Lo schema fa due lavori: valida i valori a runtime e produce il tipo SignupValues a compile time. Il resolver traduce il risultato di Zod nel formato che react-hook-form si aspetta, quindi gli errori arrivano già associati al campo.

Il form completo

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
      
    
  );
}

Tre dettagli tengono in piedi il tutto: Form pubblica il contesto del form, FormControl aggiunge aria-invalid e aria-describedby quando c'è un errore, e FormMessage stampa il messaggio solo se quel campo è invalido.

Cosa fa FormField al posto tuo

• Un solo render per tasto: il campo aggiorna se stesso, non il form intero, perché Controller iscrive la sottoscrizione al singolo nome.
• Collegamento accessibile: etichetta, descrizione ed errore arrivano al campo tramite id generati, quindi lo screen reader li legge.
• Stato tipizzato: control conosce il tipo di SignupValues, e un nome sbagliato diventa un errore di compilazione.

Il comando

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

Record vivi nel catalogo

Il risultato si confronta con record già pubblicati: la libreria shadcn, il blocco form-layout-01 con etichette e colonne, e la categoria blocchi form. Ogni record indica licenza e sorgente.

La limitazione

Lo schema valida nel browser, non sul server: la stessa regola va rieseguita lì, altrimenti basta una richiesta costruita a mano per saltarla. Il form monta con noValidate, quindi la validazione nativa del browser resta spenta e i messaggi sono solo quelli che scrivi tu.

Dove continuare

L'installazione dei componenti è in come installare shadcn/ui; la stessa validazione lato server è in Server Actions e validazione; il confronto fra le librerie di form è in librerie di form React. Per i token di stile leggi come tematizzare shadcn/ui.