Exemples React Hook Form, testés et en direct

Exemples React Hook Form

Exemples React Hook Form : Zod, field arrays, formulaires multi-étapes, démos en direct | We.Inc

Des exemples React Hook Form fonctionnels à essayer sur la page : validation Zod, vérifications asynchrones, field arrays, formulaire multi-étapes, upload de fichier, Controller et server actions Next.js.

React Hook Form gère les formulaires React avec des inputs non contrôlés : appelez useForm, étalez register("name") sur chaque input, et enveloppez votre fonction d'envoi dans handleSubmit. Ajoutez zodResolver pour valider avec un schéma Zod. Les formulaires ci-dessous fonctionnent sur cette page : règles, Zod, vérifications asynchrones, field arrays, formulaire multi-étapes, upload de fichier et server actions.

Installation

Besoin
Commande

La bibliothèque
npm install react-hook-form

Validation par schéma
npm install zod @hookform/resolvers

Remplissez chaque démo, envoyez-la avec des erreurs, puis corrigez-les. Le code à côté est celui qui s'exécute. Les erreurs sont reliées à leurs inputs avec aria-describedby et annoncées avec role="alert", les formulaires fonctionnent donc aussi avec un lecteur d'écran.

Appelez useForm, éventuellement avec defaultValues et un resolver.
Étalez register("field") sur chaque input ; donnez à chaque input un libellé visible.
Enveloppez votre fonction d'envoi : onSubmit={handleSubmit(save)}.
Affichez formState.errors.field?.message à côté de chaque champ.
Désactivez le bouton avec isSubmitting pendant l'enregistrement.

Définissez defaultValues pour chaque champ. Cela rend reset prévisible et évite les avertissements de passage de contrôlé à non contrôlé.
Utilisez valueAsNumber ou z.coerce.number() pour les champs numériques ; sinon les inputs renvoient toujours des chaînes.
Choisissez le mode onTouched pour les formulaires d'inscription : pas d'erreurs rouges pendant que la personne tape encore sa première réponse.
Ajoutez noValidate au formulaire quand vous validez en JavaScript, pour que les bulles du navigateur et vos messages n'apparaissent pas en même temps.
Gardez le schéma Zod dans son propre fichier pour que le serveur puisse l'importer sans embarquer React.

Questions fréquentes

React Hook Form est-il meilleur que Formik ?

React Hook Form provoque moins de re-rendus car les inputs restent non contrôlés et il lit les valeurs via des refs. Formik garde chaque valeur dans le state React. Pour les grands formulaires, React Hook Form est généralement plus rapide et demande moins de code.

Comment utiliser React Hook Form avec Zod ?

Installez zod et @hookform/resolvers, définissez un schéma z.object, et passez resolver: zodResolver(schema) à useForm. Utilisez z.infer<typeof schema> comme type du formulaire ; les messages d'erreur viennent du schéma.

Comment réinitialiser un formulaire après l'envoi ?

Appelez reset() dans votre gestionnaire d'envoi une fois l'enregistrement réussi, ou passez de nouvelles valeurs avec reset(values). reset peut aussi être appelé dans un effet quand isSubmitSuccessful passe à true.

Pourquoi mon champ numérique est-il une chaîne ?

Les inputs HTML renvoient du texte. Enregistrez le champ avec valueAsNumber: true, ou utilisez z.coerce.number() dans un schéma Zod, pour obtenir un vrai nombre.

Puis-je utiliser React Hook Form avec shadcn/ui ?

Oui. shadcn/ui fournit un composant Form construit sur le Controller de React Hook Form. Notre guide des formulaires et tableaux shadcn le détaille avec un exemple en direct.

Messages d'erreur accessibles

Chaque input a besoin d'un libellé relié avec htmlFor, pas seulement d'un placeholder. Quand un champ est incorrect, définissez aria-invalid sur l'input et faites pointer aria-describedby vers le message, pour que les lecteurs d'écran lisent l'erreur avec le champ.
À l'envoi, React Hook Form place le focus sur le premier champ invalide par défaut (shouldFocusError). Laissez cette option active ; c'est le moyen le plus rapide pour un utilisateur clavier de trouver ce qui ne va pas.

Erreurs fréquentes

Utiliser l'index comme key dans un field array, ce qui mélange les lignes après une suppression.
Appeler watch() en haut d'un grand formulaire, ce qui re-rend tout le formulaire à chaque frappe. Utilisez plutôt useWatch dans un petit composant enfant.
Se fier uniquement à la validation du navigateur. Tout ce qui est envoyé à votre serveur doit y être vérifié à nouveau.

Aide-mémoire de l'API

Les parties de l'API que vous utiliserez le plus

API
À utiliser pour

register(name, rules)
Inputs natifs, selects, textareas et cases à cocher

handleSubmit(onValid, onInvalid?)
Valide, puis appelle votre fonction avec les valeurs

formState.errors / isSubmitting / isDirty
Messages d'erreur et états des boutons

mode: onSubmit | onBlur | onTouched | onChange | all
Moment où la validation s'exécute (onSubmit par défaut)

resolver: zodResolver(schema)
Valider avec un schéma Zod (ou Yup, Valibot)

useFieldArray
Lignes répétées : ajouter, supprimer, déplacer

Controller / useController
Inputs personnalisés sans ref

trigger(names)
Valider certains champs immédiatement, comme dans une étape de formulaire

setError / clearErrors
Erreurs renvoyées par le serveur

reset(values)
Charger des données enregistrées ou vider après l'envoi

watch / useWatch
Lire une valeur pendant qu'elle change (useWatch re-rend moins)

Validation : règles intégrées, Zod et vérifications asynchrones

Formulaire simple avec règles intégrées

register relie un input par son nom et accepte des règles de style HTML. errors contient un message par champ après un envoi échoué.

Schéma Zod avec zodResolver

Un seul schéma vous donne les règles de validation, les messages d'erreur et le type TypeScript. refine vérifie deux champs ensemble, et path indique quel champ reçoit l'erreur.

Validation asynchrone (le nom d'utilisateur est-il libre ?)

Une fonction validate peut renvoyer une promesse. Renvoyez true si la valeur convient, ou une chaîne à afficher comme erreur. Associez-la au mode onBlur pour qu'elle ne s'exécute pas à chaque frappe.

Field arrays, formulaires multi-étapes, fichiers et inputs personnalisés

Field arrays (ajouter et supprimer des lignes)

useFieldArray gère une liste à l'intérieur du formulaire. Utilisez field.id comme key, jamais l'index, pour que React garde chaque input rattaché à la bonne ligne.

Formulaire multi-étapes

Gardez un seul formulaire pour toutes les étapes et appelez trigger avec les champs de l'étape en cours avant de passer à la suivante. Les valeurs des étapes précédentes restent dans le formulaire, donc l'envoi final contient tout.

Upload de fichier avec contrôle de taille et de type

Un input de fichier s'enregistre comme les autres ; sa valeur est une FileList. Vérifiez la taille et le type dans validate et envoyez le fichier avec FormData.

Composants contrôlés avec Controller

Les inputs qui n'exposent pas de ref, comme de nombreux sélecteurs de date et selects personnalisés, se connectent via Controller. Il transmet value et onChange à votre composant.

Envoyer au serveur

Server action Next.js, validée deux fois

Validez dans le navigateur pour un retour rapide, puis à nouveau sur le serveur car le navigateur peut être contourné. Partager un seul schéma Zod garde les deux synchronisés ; setError affiche les problèmes côté serveur sur le bon champ.

Besoin plutôt d'un simple formulaire HTML ? Consultez

comment ajouter un formulaire de contact

Envoyé :

Nom

E-mail

Veuillez saisir votre nom

Veuillez saisir votre e-mail

Cet e-mail semble incorrect

Envoi...

Envoyer

Saisissez un e-mail valide

Au moins 8 caractères

Les mots de passe ne correspondent pas

Mot de passe

Confirmer le mot de passe

Créer un compte

Cette démo simule le serveur avec une courte attente. Déjà pris : admin, studio, hello.

Nom d'utilisateur

Choisissez un nom d'utilisateur

Ce nom d'utilisateur est déjà pris

Vérification...

Réserver

Création de logo

Nom de l'article {n}

Quantité de l'article {n}

Article

Supprimer

Ajouter un article

Enregistrer

Obligatoire

Étape {n} sur {total}

Entreprise

Taille de l'équipe

Formule

Choisir

Starter

Équipe

Remplissez les champs en surbrillance.

Retour

Terminer

Logo (PNG ou JPG, jusqu'à 2 MB ; il reste dans votre navigateur)

Choisir un fichier

2 MB maximum

PNG ou JPG uniquement

Envoyer

Au moins 10

Budget :

Commencer gratuitement · Sans carte bancaire

Exemples React Hook Form, testés et en direct