React-Hook-Form-Beispiele, getestet und live

React-Hook-Form-Beispiele

React-Hook-Form-Beispiele: Zod, Field Arrays, Wizards, Live-Demos | We.Inc

Funktionierende React-Hook-Form-Beispiele, die du direkt auf der Seite ausprobieren kannst: Zod-Validierung, asynchrone Prüfungen, Field Arrays, ein mehrstufiger Wizard, Datei-Upload, Controller und Next.js Server Actions.

React Hook Form verwaltet React-Formulare mit unkontrollierten Eingaben: Rufe useForm auf, verteile register("name") auf jedes Eingabefeld und umschließe deine Submit-Funktion mit handleSubmit. Füge zodResolver hinzu, um mit einem Zod-Schema zu validieren. Die Formulare unten laufen direkt auf dieser Seite: Regeln, Zod, asynchrone Prüfungen, Field Arrays, ein Wizard, Datei-Upload und Server Actions.

Installation

Bedarf
Befehl

Die Bibliothek
npm install react-hook-form

Schema-Validierung
npm install zod @hookform/resolvers

Fülle jede Demo aus, sende sie mit Fehlern ab und korrigiere sie dann. Der Code daneben ist genau das, was läuft. Fehler sind per aria-describedby mit ihren Eingabefeldern verknüpft und werden mit role="alert" angesagt, sodass die Formulare auch mit einem Screenreader funktionieren.

Rufe useForm auf, optional mit defaultValues und einem Resolver.
Verteile register("field") auf jedes Eingabefeld; gib jedem Feld ein sichtbares Label.
Umschließe deine Submit-Funktion: onSubmit={handleSubmit(save)}.
Zeige formState.errors.field?.message neben jedem Feld an.
Deaktiviere den Button mit isSubmitting, solange das Speichern läuft.

Setze defaultValues für jedes Feld. Das macht reset vorhersehbar und verhindert Warnungen beim Wechsel von kontrolliert zu unkontrolliert.
Nutze valueAsNumber oder z.coerce.number() für Zahlenfelder; sonst liefern Eingabefelder immer Strings.
Wähle für Registrierungsformulare den Modus onTouched: keine roten Fehler, während jemand noch die erste Antwort tippt.
Füge dem Formular noValidate hinzu, wenn du in JavaScript validierst, damit nicht gleichzeitig Browser-Hinweise und deine Meldungen erscheinen.
Leg das Zod-Schema in eine eigene Datei, damit der Server es importieren kann, ohne React mitzuladen.

Häufige Fragen

Ist React Hook Form besser als Formik?

React Hook Form rendert seltener neu, weil Eingabefelder unkontrolliert bleiben und es Werte über Refs liest. Formik hält jeden Wert im React-State. Bei großen Formularen ist React Hook Form meist schneller und braucht weniger Code.

Wie nutze ich React Hook Form mit Zod?

Installiere zod und @hookform/resolvers, definiere ein z.object-Schema und übergib resolver: zodResolver(schema) an useForm. Verwende z.infer<typeof schema> als Formulartyp; die Fehlermeldungen kommen aus dem Schema.

Wie setze ich ein Formular nach dem Absenden zurück?

Rufe reset() in deinem Submit-Handler auf, nachdem das Speichern geklappt hat, oder übergib mit reset(values) neue Werte. reset lässt sich auch in einem Effect aufrufen, sobald isSubmitSuccessful true wird.

Warum ist mein Zahlenfeld ein String?

HTML-Eingabefelder liefern Text. Registriere mit valueAsNumber: true oder nutze z.coerce.number() in einem Zod-Schema, um eine echte Zahl zu erhalten.

Kann ich React Hook Form mit shadcn/ui nutzen?

Ja. shadcn/ui liefert eine Form-Komponente, die auf dem Controller von React Hook Form aufbaut. Unser Leitfaden zu shadcn-Formularen und -Tabellen zeigt das mit einem Live-Beispiel.

Barrierefreie Fehlermeldungen

Jedes Eingabefeld braucht ein Label, das per htmlFor verknüpft ist, nicht nur einen Platzhalter. Ist ein Feld falsch, setze aria-invalid auf das Eingabefeld und lass aria-describedby auf die Meldung zeigen, damit Screenreader den Fehler zusammen mit dem Feld vorlesen.
Beim Absenden fokussiert React Hook Form standardmäßig das erste ungültige Feld (shouldFocusError). Lass das eingeschaltet; so finden Tastaturnutzer am schnellsten, was schiefgelaufen ist.

Häufige Fehler

Den Index als key in einem Field Array verwenden, wodurch nach dem Entfernen Zeilen durcheinandergeraten.
watch() ganz oben in einem großen Formular aufrufen, wodurch bei jedem Tastendruck das ganze Formular neu rendert. Nutze stattdessen useWatch in einer kleinen Kindkomponente.
Sich allein auf die Browser-Validierung verlassen. Alles, was an deinen Server geht, muss dort erneut geprüft werden.

API-Cheat-Sheet

Die Teile der API, die du am häufigsten nutzt

API
Wofür

register(name, rules)
Native Eingabefelder, Selects, Textareas und Checkboxen

handleSubmit(onValid, onInvalid?)
Validiert und ruft dann deine Funktion mit den Werten auf

formState.errors / isSubmitting / isDirty
Fehlermeldungen und Button-Zustände

mode: onSubmit | onBlur | onTouched | onChange | all
Wann die Validierung läuft (onSubmit ist der Standard)

resolver: zodResolver(schema)
Mit einem Zod-Schema (oder Yup, Valibot) validieren

useFieldArray
Wiederholte Zeilen: hinzufügen, entfernen, verschieben

Controller / useController
Eigene Eingabefelder ohne Ref

trigger(names)
Einige Felder sofort validieren, etwa in einem Wizard-Schritt

setError / clearErrors
Fehler, die vom Server zurückkommen

reset(values)
Gespeicherte Daten laden oder nach dem Absenden leeren

watch / useWatch
Einen Wert bei Änderungen lesen (useWatch rendert seltener neu)

Validierung: eingebaute Regeln, Zod und asynchrone Prüfungen

Einfaches Formular mit eingebauten Regeln

register verbindet ein Eingabefeld über seinen Namen und nimmt Regeln im HTML-Stil entgegen. errors enthält nach einem gescheiterten Absenden eine Meldung pro Feld.

Zod-Schema mit zodResolver

Ein einziges Schema liefert Validierungsregeln, Fehlermeldungen und den TypeScript-Typ. refine prüft zwei Felder gemeinsam, und path legt fest, welches Feld den Fehler bekommt.

Asynchrone Validierung (ist der Benutzername frei?)

Eine validate-Funktion darf ein Promise zurückgeben. Gib true zurück, wenn der Wert in Ordnung ist, oder einen String, der als Fehler angezeigt wird. Kombiniere sie mit dem Modus onBlur, damit sie nicht bei jedem Tastendruck läuft.

Field Arrays, Wizards, Dateien und eigene Eingabefelder

Field Arrays (Zeilen hinzufügen und entfernen)

useFieldArray verwaltet eine Liste innerhalb des Formulars. Nutze field.id als key, niemals den Index, damit React jedes Eingabefeld der richtigen Zeile zuordnet.

Mehrstufiger Wizard

Nutze ein Formular für alle Schritte und rufe trigger mit den Feldern des aktuellen Schritts auf, bevor es weitergeht. Werte aus früheren Schritten bleiben im Formular, daher enthält das letzte Absenden alles.

Datei-Upload mit Prüfung von Größe und Typ

Ein Datei-Eingabefeld wird wie jedes andere registriert; sein Wert ist eine FileList. Prüfe Größe und Typ in validate und sende die Datei mit FormData.

Kontrollierte Komponenten mit Controller

Eingabefelder ohne Ref, etwa viele Datumsauswahlen und eigene Selects, werden über Controller angebunden. Er übergibt value und onChange an deine Komponente.

An den Server senden

Next.js Server Action, doppelt validiert

Validiere im Browser für schnelles Feedback und erneut auf dem Server, weil der Browser umgangen werden kann. Ein gemeinsames Zod-Schema hält beides synchron; setError zeigt serverseitige Probleme am richtigen Feld an.

Brauchst du stattdessen ein einfaches HTML-Formular? Sieh dir an,

wie du ein Kontaktformular hinzufügst

Gesendet:

Name

E-Mail

Bitte gib deinen Namen ein

Bitte gib deine E-Mail-Adresse ein

Diese E-Mail-Adresse sieht falsch aus

Wird gesendet...

Senden

Gib eine gültige E-Mail-Adresse ein

Mindestens 8 Zeichen

Die Passwörter stimmen nicht überein

Passwort

Passwort bestätigen

Konto erstellen

Diese Demo simuliert den Server mit einer kurzen Wartezeit. Vergeben: admin, studio, hello.

Benutzername

Wähle einen Benutzernamen

Dieser Benutzername ist vergeben

Wird geprüft...

Sichern

Logodesign

Name von Position {n}

Menge von Position {n}

Position

Entfernen

Position hinzufügen

Speichern

Pflichtfeld

Schritt {n} von {total}

Unternehmen

Teamgröße

Tarif

Auswählen

Starter

Team

Fülle die markierten Felder aus.

Zurück

Weiter

Abschließen

Logo (PNG oder JPG, bis 2 MB; es bleibt in deinem Browser)

Datei auswählen

Max. 2 MB

Nur PNG oder JPG

Hochladen

Mindestens 10

Budget:

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap