I form sono una delle parti più noiose delle interfacce.

Li scrivi, li validi, li testi… e poi puntualmente l’utente inserisce qualcosa che non ti aspetti.

Se vuoi fare le cose fatte bene — cioè validazione sul client, tipi sicuri e lo stesso schema riusato anche sul server — allora la coppia React Hook Form + Zod è tra le soluzioni più eleganti in circolazione.

In Arkemis la usiamo perché:

• è leggera (niente form controller enormi),
• è typescript-first,
• e ci permette di avere una sola fonte di verità per la validazione.

Vediamo come si imposta.

1. Cosa fanno i due strumenti

• React Hook Form (RHF): si occupa della gestione del form (registrare campi, gestire submit, errori, stato, ecc.). È molto performante perché usa componenti non controllati.
• Zod: si occupa della validazione e della definizione dello schema. Scrivi lo schema una volta e da lì tiri fuori i tipi TypeScript, i messaggi di errore e perfino la validazione lato server.

Metterli insieme significa:

1. RHF raccoglie i dati,
2. Zod dice se sono validi,
3. se non lo sono RHF ti mostra gli errori.

2. Setup iniziale

Installa tutto:

jsx

• react-hook-form: la libreria form
• zod: lo schema validator
• @hookform/resolvers: il “ponte” tra i due

3. Definire lo schema con Zod

Partiamo dalla parte più importante: lo schema.

Immaginiamo un form di contatto “dev style”:

• email
• githubUrl
• yearsOfExperience (1-10)
• password + conferma

jsx

🎯 Nota: qui non stiamo duplicando tipi — li prendiamo direttamente da Zod.

4. Creare il form con React Hook Form

Ora usiamo lo schema dentro il form.

L’idea è: “quando faccio submit, passa tutto dal resolver di Zod”.

jsx

📌 Cose importanti:

• zodResolver(contactFormSchema) fa sì che RHF usi Zod come fonte di verità.
• valueAsNumber: true serve perché gli <input type="number" /> buttano fuori stringhe.

5. Validazione anche lato server (Next.js)

Quando il form arriva su un api Next.js come `/api/contact`, lo validiamo con lo stesso schema.

jsx

In questo modo:

• usi lo stesso schema sul client e sul server,
• non replichi le regole,
• se domani cambi “github deve contenere github.com” lo cambi in un punto solo.

6. Gestire gli errori server nel form

Se il server risponde con gli errori, li puoi rimettere dentro RHF:

jsx

(nel componente sopra non ho messo setError per tenere il codice più leggibile, ma lo puoi aggiungere alla destrutturazione di useForm)

7. Perché questa combo funziona bene

• Performance: RHF non rimbalza lo stato a ogni carattere, quindi i form restano snelli.
• DX: Zod ti dà i tipi pronti, niente duplicazioni.
• Coerenza: lo stesso schema sul client e sul server.
• Messaggi chiari: puoi dare errori leggibili all’utente invece delle classiche robe generiche.

8. 🧰 Bonus Arkemis: shadcn-zod-form (200+ ⭐ su GitHub)

In Arkemis abbiamo pubblicato una piccola utility open source, shadcn-zod-form, che fa esattamente quello che avremmo voluto trovare già pronto:

Genera form di shadcn/ui partendo direttamente dagli schemi Zod.

Unisci il meglio dei tre mondi: Zod (schema), React Hook Form (gestione), shadcn/ui (UI bella e consistente).

In pratica:

• prendi il tuo schema Zod (quello che già usi per validare),
• lanci il comando,
• ti ritrovi un form già pronto con i componenti giusti.

L’abbiamo aperto e… ha già superato le 200 ⭐ su GitHub 🎉 Segno che questo problema lo avevano in tanti.

È open-source, quindi se vuoi aggiungere nuovi mapping di componenti, migliorare la CLI o supportare nuovi pattern, le PR sono benvenute

GitHub - arkemis-labs/shadcn-zod-form: CLI tool to convert Zod schemas into shadcn/ui forms.

CLI tool to convert Zod schemas into shadcn/ui forms. - arkemis-labs/shadcn-zod-form

🧩 Conclusione

Nel mondo dei form, spesso si parte da un campo di testo e si finisce con un mostro di validazioni, stati e bug invisibili.

La combo React Hook Form + Zod è la cura elegante a tutto questo caos: ti dà tipi forti, validazione chiara e una DX che ti fa venir voglia di costruire di più e meglio.

Con pochi hook e uno schema ben scritto, ottieni form più affidabili, scalabili e facili da mantenere. Ma soprattutto, ottieni consistenza: il client e il server parlano lo stesso linguaggio.

Se anche tu vuoi creare esperienze fluide, tipate e senza sorprese,

beh… la prossima volta che devi validare un campo, fatti aiutare da Zod e React Hook Form.

🧠 Build clean. Validate smart. Quack proud. 🦆

Risorse

https://zod.dev

https://react-hook-form.com