Werkende React Hook Form voorbeelden die u op de pagina kunt proberen: Zod-validatie, async checks, field arrays, een wizard met meerdere stappen, file upload, Controller en Next.js server actions.
React Hook Form regelt React-formulieren met uncontrolled inputs: roep useForm aan, spread register("name") op elk input en wikkel uw submitfunctie in handleSubmit. Voeg zodResolver toe om te valideren met een Zod-schema. De formulieren hieronder draaien op deze pagina: regels, Zod, async checks, field arrays, een wizard, file upload en server actions.
Installeren
Vul elke demo in, verstuur hem met fouten en verbeter die daarna. De code ernaast is wat er draait. Fouten zijn met aria-describedby aan hun inputs gekoppeld en worden aangekondigd met role="alert", dus de formulieren werken ook met een schermlezer.
React Hook Form rendert minder vaak opnieuw omdat inputs uncontrolled blijven en het waarden via refs uitleest. Formik houdt elke waarde in React-state. Bij grote formulieren is React Hook Form meestal sneller en hebt u minder code nodig.
Installeer zod en @hookform/resolvers, definieer een z.object-schema en geef resolver: zodResolver(schema) mee aan useForm. Gebruik z.infer<typeof schema> als type voor het formulier; de foutmeldingen komen uit het schema.
Roep reset() aan in uw submithandler nadat het opslaan is gelukt, of geef nieuwe waarden mee met reset(values). reset kan ook in een effect worden aangeroepen zodra isSubmitSuccessful true wordt.
HTML-inputs geven tekst terug. Registreer met valueAsNumber: true, of gebruik z.coerce.number() in een Zod-schema, om een echt getal te krijgen.
Ja. shadcn/ui levert een Form-component dat is gebouwd op de Controller van React Hook Form. Onze gids over shadcn-formulieren en tabellen loopt het door met een live voorbeeld.
De delen van de API die u het meest gebruikt
register koppelt een input op naam en accepteert regels in HTML-stijl. errors bevat na een mislukte verzending per veld een melding.
Eén schema geeft u validatieregels, foutmeldingen en het TypeScript-type. refine controleert twee velden samen, en path bepaalt welk veld de fout krijgt.
Een validate-functie mag een promise teruggeven. Geef true terug als de waarde goed is, of een string om als fout te tonen. Combineer het met mode onBlur zodat het niet bij elke toetsaanslag draait.
useFieldArray beheert een lijst binnen het formulier. Gebruik field.id als key, nooit de index, zodat React elk input aan de juiste rij gekoppeld houdt.
Houd één formulier voor alle stappen en roep trigger aan met de velden van de huidige stap voordat u verdergaat. Waarden uit eerdere stappen blijven in het formulier, dus de laatste verzending bevat alles.
Een bestandsinput registreert u net als elk ander; de waarde is een FileList. Controleer grootte en type in validate en verstuur het bestand met FormData.
Inputs die geen ref beschikbaar stellen, zoals veel datumkiezers en eigen selects, koppelt u via Controller. Die geeft value en onChange door aan uw component.
Valideer in de browser voor snelle feedback en nogmaals op de server, omdat de browser omzeild kan worden. Eén gedeeld Zod-schema houdt beide gelijk; setError toont problemen van de server bij het juiste veld.
Liever een gewoon HTML-formulier? Bekijk
Verstuurd:
Vul uw naam in
Vul uw e-mailadres in
Dat e-mailadres lijkt niet te kloppen
Bezig met versturen...
Versturen
Voer een geldig e-mailadres in
Minstens 8 tekens
Wachtwoorden komen niet overeen
Wachtwoord
Bevestig wachtwoord
Account aanmaken
Deze demo simuleert de server met een korte wachttijd. Bezet: admin, studio, hello.
Gebruikersnaam
Kies een gebruikersnaam
Die gebruikersnaam is al bezet
Bezig met controleren...
Claimen
Logo-ontwerp
Naam van item {n}
Aantal van item {n}
Item
Verwijderen
Item toevoegen
Opslaan
Verplicht
Stap {n} van {total}
Bedrijf
Teamgrootte
Abonnement
Kies
Starter
Team
Vul de gemarkeerde velden in.
Terug
Volgende
Afronden
Logo (PNG of JPG, tot 2 MB; het blijft in uw browser)
Kies een bestand
Max. 2 MB
Alleen PNG of JPG
Uploaden
Minstens 10
Budget:
Gratis beginnen · Geen creditcard nodig