Esempi di React Hook Form, Testati e dal Vivo

Esempi di React Hook Form

Esempi di React Hook Form: Zod, Field Array, Wizard, Demo dal Vivo | We.Inc

Esempi funzionanti di React Hook Form da provare direttamente nella pagina: validazione con Zod, controlli asincroni, field array, un wizard in più passaggi, upload di file, Controller e server action di Next.js.

React Hook Form gestisce i form React con input non controllati: chiama useForm, applica register("name") a ogni input con lo spread e avvolgi la tua funzione di invio in handleSubmit. Aggiungi zodResolver per validare con uno schema Zod. I form qui sotto funzionano in questa pagina: regole, Zod, controlli asincroni, field array, un wizard, upload di file e server action.

Installazione

Ti serve
Comando

La libreria
npm install react-hook-form

Validazione con schema
npm install zod @hookform/resolvers

Compila ogni demo, inviala con degli errori, poi correggili. Il codice accanto è quello che viene eseguito. Gli errori sono collegati ai rispettivi input con aria-describedby e annunciati con role="alert", quindi i form funzionano anche con uno screen reader.

Chiama useForm, facoltativamente con defaultValues e un resolver.
Applica register("field") a ogni input con lo spread; dai a ogni input un'etichetta visibile.
Avvolgi la tua funzione di invio: onSubmit={handleSubmit(save)}.
Mostra formState.errors.field?.message accanto a ogni campo.
Disattiva il pulsante con isSubmitting mentre il salvataggio è in corso.

Imposta defaultValues per ogni campo. Rende reset prevedibile ed elimina gli avvisi da controllato a non controllato.
Usa valueAsNumber o z.coerce.number() per gli input numerici; altrimenti gli input restituiscono sempre stringhe.
Scegli la modalità onTouched per i form di registrazione: niente errori rossi mentre qualcuno sta ancora scrivendo la prima risposta.
Aggiungi noValidate al form quando validi in JavaScript, così non compaiono sia i fumetti del browser sia i tuoi messaggi.
Tieni lo schema Zod in un file a parte così il server può importarlo senza tirarsi dietro React.

Domande frequenti

React Hook Form è meglio di Formik?

React Hook Form esegue meno re-render perché gli input restano non controllati e legge i valori tramite ref. Formik tiene ogni valore nello state di React. Per i form grandi, React Hook Form è di solito più veloce e richiede meno codice.

Come uso React Hook Form con Zod?

Installa zod e @hookform/resolvers, definisci uno schema z.object e passa resolver: zodResolver(schema) a useForm. Usa z.infer<typeof schema> come tipo del form, e i messaggi di errore arrivano dallo schema.

Come resetto un form dopo l'invio?

Chiama reset() nel tuo handler di invio dopo che il salvataggio è riuscito, oppure passa nuovi valori con reset(values). reset può anche essere chiamato in un effect quando isSubmitSuccessful diventa true.

Perché il mio campo numerico è una stringa?

Gli input HTML restituiscono testo. Registra con valueAsNumber: true, oppure usa z.coerce.number() in uno schema Zod, per ottenere un vero numero.

Posso usare React Hook Form con shadcn/ui?

Sì. shadcn/ui include un componente Form basato sul Controller di React Hook Form. La nostra guida a form e tabelle shadcn lo spiega passo per passo con un esempio dal vivo.

Messaggi di errore accessibili

Ogni input ha bisogno di un'etichetta collegata con htmlFor, non solo di un placeholder. Quando un campo è sbagliato, imposta aria-invalid sull'input e fai puntare aria-describedby al messaggio, così gli screen reader leggono l'errore insieme al campo.
All'invio, React Hook Form mette a fuoco il primo campo non valido per impostazione predefinita (shouldFocusError). Lascialo attivo; è il modo più rapido per chi usa la tastiera di trovare cosa non va.

Errori comuni

Usare l'indice come key in un field array, il che confonde le righe dopo una rimozione.
Chiamare watch() in cima a un form grande, il che esegue il re-render dell'intero form a ogni tasto premuto. Usa invece useWatch in un piccolo componente figlio.
Fidarsi solo della validazione del browser. Tutto ciò che viene inviato al tuo server deve essere ricontrollato lì.

Cheat sheet delle API

Le parti dell'API che userai di più

API
Usala per

register(name, rules)
Input nativi, select, textarea e checkbox

handleSubmit(onValid, onInvalid?)
Valida, poi chiama la tua funzione con i valori

formState.errors / isSubmitting / isDirty
Messaggi di errore e stati dei pulsanti

mode: onSubmit | onBlur | onTouched | onChange | all
Quando viene eseguita la validazione (onSubmit è il default)

resolver: zodResolver(schema)
Validare con uno schema Zod (o Yup, Valibot)

useFieldArray
Righe ripetute: aggiungere, rimuovere, spostare

Controller / useController
Input personalizzati senza ref

trigger(names)
Validare subito alcuni campi, come in un passaggio di un wizard

setError / clearErrors
Errori restituiti dal server

reset(values)
Caricare dati salvati o svuotare dopo l'invio

watch / useWatch
Leggere un valore mentre cambia (useWatch esegue meno re-render)

Validazione: regole integrate, Zod e controlli asincroni

Form di base con regole integrate

register collega un input tramite il nome e accetta regole in stile HTML. errors contiene un messaggio per campo dopo un invio fallito.

Schema Zod con zodResolver

Un solo schema ti dà regole di validazione, messaggi di errore e il tipo TypeScript. refine controlla due campi insieme, e path indica quale campo riceve l'errore.

Validazione asincrona (il nome utente è libero?)

Una funzione validate può restituire una promise. Restituisci true quando il valore va bene, o una stringa da mostrare come errore. Abbinala alla modalità onBlur così non viene eseguita a ogni tasto.

Field array, wizard, file e input personalizzati

Field array (aggiungere e rimuovere righe)

useFieldArray gestisce un elenco dentro il form. Usa field.id come key, mai l'indice, così React mantiene ogni input collegato alla riga giusta.

Wizard in più passaggi

Mantieni un solo form per tutti i passaggi e chiama trigger con i campi del passaggio attuale prima di andare avanti. I valori dei passaggi precedenti restano nel form, quindi l'invio finale ha tutto.

Upload di file con controlli su dimensione e tipo

Un input file si registra come qualsiasi altro; il suo valore è una FileList. Controlla dimensione e tipo in validate e invia il file con FormData.

Componenti controllati con Controller

Gli input che non espongono un ref, come molti date picker e select personalizzate, si collegano tramite Controller. Passa value e onChange al tuo componente.

Invio al server

Server action di Next.js, validata due volte

Valida nel browser per un feedback rapido e di nuovo sul server perché il browser può essere aggirato. Condividere un unico schema Zod mantiene allineate le due validazioni; setError mostra i problemi lato server sul campo giusto.

Ti serve invece un semplice form HTML? Leggi

come aggiungere un modulo di contatto

Inviato:

Nome

Inserisci il tuo nome

Inserisci la tua email

Questa email non sembra corretta

Invio in corso...

Invia

Inserisci un'email valida

Almeno 8 caratteri

Le password non coincidono

Password

Conferma password

Crea account

Questa demo simula il server con una breve attesa. Già presi: admin, studio, hello.

Nome utente

Scegli un nome utente

Questo nome utente è già preso

Verifica in corso...

Prendilo

Design del logo

Nome dell'elemento {n}

Quantità dell'elemento {n}

Elemento

Rimuovi

Aggiungi elemento

Salva

Obbligatorio

Passaggio {n} di {total}

Azienda

Dimensione del team

Piano

Scegli

Starter

Team

Compila i campi evidenziati.

Indietro

Avanti

Fine

Logo (PNG o JPG, fino a 2 MB; resta nel tuo browser)

Scegli un file

Massimo 2 MB

Solo PNG o JPG

Carica

Almeno 10

Budget:

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito