Czy Zod można zastąpić przez Yup lub Joi?

Tak, `@hookform/resolvers` wspiera Zod, Yup, Joi, Superstruct, Valibot i inne. Zod jest najpopularniejszy w 2026, ma najlepszy TypeScript support i najwygodniejsze API. Valibot jest ciekawą alternatywą — mniejszy bundle, ale mniej features.

Co z performance przy wielkich formularzach?

RHF jest zbudowany pod performance — inputy są uncontrolled, re-rendery są granularne. Dla formularzy z 100+ polami nadal działa płynnie. Dla porównania, klasyczny `useState` na 100 polach generuje 100 re-renderów przy każdej zmianie.

Czy mogę używać RHF bez TypeScript?

Tak, RHF działa z vanilla JavaScript. Ale tracisz największą wartość Zod — inferowane typy. W 2026 roku TypeScript jest de facto standardem dla nowych projektów React.

Jak zrobić walidację wielojęzyczną?

Zod pozwala przekazać custom error map. Najpopularniejsze podejście — biblioteka `zod-i18n-map`, która mapuje Zod errors na przetłumaczone wiadomości. Można też ręcznie przekazywać klucze do `i18next` przez `message: 'errors.email.invalid'`.

Co z uploadem plików?

RHF obsługuje ` ` przez `register`, ale dla upload progress / chunked upload potrzebujesz custom logic. Typowe podejście — RHF trzyma referencję do `FileList`, a osobny custom hook zajmuje się uploadem z progress tracking.

React Hook Form + Zod — kompletny stack formularzowy, który skaluje się do dowolnego projektu

Formularze w React to pole minowe. Między useState na każde pole, ręczne preventDefault, walidacją po obu stronach, obsługą błędów, reset, integracją z UI kitami — prosty formularz kontaktowy potrafi urosnąć do 200 linii kodu. Gdy dochodzą dynamiczne pola (dodawanie/usuwanie), multi-step wizard, asynchroniczna walidacja — sytuacja robi się krytyczna.

to stack, który w 2026 roku traktuje formularze jak powinno się je traktować — deklaratywnie, typowo, wydajnie. W tym artykule pokazuję, jak realnie budować formularze w tym stacku od prostych po najbardziej skomplikowane, i porównuję z React 19 Actions — żebyś wiedział, kiedy który wybrać.

Dlaczego nie useState per pole

Klasyczne podejście z lat 2017–2020:

Code

function ContactForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
 
  const validate = () => {
    const newErrors = {};
    if (!email) newErrors.email = 'Email required';
    if (!email.includes('@')) newErrors.email = 'Invalid email';
    if (!name) newErrors.name = 'Name required';
    if (!message || message.length < 10) newErrors.message = 'Message too short';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setIsSubmitting(true);
    // ... fetch call
    setIsSubmitting(false);
  };
 
  return (/* JSX z useState'ami na każdym polu */);
}

Działa, ale problemów jest cała lista:

Każda zmiana re-renderuje cały formularz. Przy 10 polach to 10 re-renderów dla każdego wpisanego znaku.
Walidacja ręczna — łatwo coś pominąć, trudno utrzymać spójność po stronie serwera.
Brak reuse — każdy formularz od nowa.
Brak wsparcia dla dynamicznych pól (dodawanie/usuwanie itemów).

React Hook Form rozwiązuje wszystko powyższe, a Zod dodaje type-safe walidację. Razem — default stack dla każdego nowego formularza.

Instalacja i minimalny setup

Code

npm install react-hook-form zod @hookform/resolvers

Trzy zależności:

react-hook-form — core biblioteka formularzy.
zod — biblioteka walidacji / schema.
@hookform/resolvers — adapter łączący RHF z Zod (albo Yup, Joi, itp.).

Minimalny formularz:

Code

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
 
const ContactSchema = z.object({
  email: z.string().email('Nieprawidłowy email'),
  name: z.string().min(2, 'Imię jest za krótkie'),
  message: z.string().min(10, 'Wiadomość musi mieć co najmniej 10 znaków'),
});
 
type ContactForm = z.infer<typeof ContactSchema>;
 
function ContactForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<ContactForm>({
    resolver: zodResolver(ContactSchema),
  });
 
  const onSubmit = async (data: ContactForm) => {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} type="email" />
      {errors.email && <p>{errors.email.message}</p>}
 
      <input {...register('name')} />
      {errors.name && <p>{errors.name.message}</p>}
 
      <textarea {...register('message')} />
      {errors.message && <p>{errors.message.message}</p>}
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Wysyłanie...' : 'Wyślij'}
      </button>
    </form>
  );
}

Zalety:

register — spinka input ze stanem formularza, bez onChange handlerów.
Walidacja automatyczna — Zod schema → błędy.
Typy wywodzone z Zod schema — z.infer<typeof ContactSchema> daje TypeScript typ.
Minimum re-renderów — RHF pod spodem używa uncontrolled inputs z ref'ami.
isSubmitting — pending state out of the box.

Dla porównania — ten sam formularz w klasycznym podejściu to 60-80 linii.

`register` vs `Controller`

RHF ma dwa API do łączenia inputów ze stanem formularza.

register — działa z natywnymi <input>, <textarea>, <select>. Najlepsze performance, najmniej kodu.

Code

<input {...register('email')} />

Controller — wrapper dla custom components, które nie mają ref-a albo używają nietypowego API (np. date pickery, rich text editory, react-select).

Code

import { Controller } from 'react-hook-form';
import DatePicker from 'react-datepicker';
 
<Controller
  name="date"
  control={control}
  render={({ field }) => (
    <DatePicker
      selected={field.value}
      onChange={field.onChange}
      onBlur={field.onBlur}
    />
  )}
/>

Regulation: wybieraj register kiedy tylko możesz, Controller tylko gdy musisz.

Walidacja — od prostych po zaawansowane

Zod daje świetne API do walidacji. Od prostej po wzajemne zależności pól:

Code

const SignupSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(64),
  confirmPassword: z.string(),
  birthdate: z.coerce.date().max(
    new Date(Date.now() - 18 * 365 * 24 * 60 * 60 * 1000),
    'Musisz mieć co najmniej 18 lat'
  ),
  terms: z.literal(true, {
    errorMap: () => ({ message: 'Musisz zaakceptować regulamin' }),
  }),
}).refine(
  (data) => data.password === data.confirmPassword,
  {
    message: 'Hasła się nie zgadzają',
    path: ['confirmPassword'],
  }
);

refine pozwala na walidację międzypolową (hasła muszą się zgadzać, data końcowa musi być po starcie). Błąd jest umieszczany na path (w tym wypadku confirmPassword), więc user widzi go przy odpowiednim polu.

Asynchroniczna walidacja

Przykład: sprawdzenie, czy email nie jest zajęty. Zod nie obsługuje async natywnie, ale RHF ma dla tego osobne API:

Code

<input
  {...register('email', {
    validate: {
      unique: async (email) => {
        const response = await fetch(`/api/check-email?email=${email}`);
        const { available } = await response.json();
        return available || 'Email jest już zajęty';
      },
    },
  })}
  type="email"
/>

Validate odpala się po blur pola (konfigurowalne przez mode w useForm). Dla user experience zwykle łączę to z debounce, żeby nie robić requestu po każdej literze.

Dynamic fields — `useFieldArray`

Formularz, gdzie user może dodawać / usuwać items (np. lista gości na wydarzenie, pozycje faktury, custom fields).

Code

import { useFieldArray, useForm } from 'react-hook-form';
 
const InvoiceSchema = z.object({
  customerName: z.string().min(1),
  items: z.array(z.object({
    description: z.string().min(1),
    quantity: z.number().min(1),
    price: z.number().min(0),
  })).min(1, 'Dodaj co najmniej jedną pozycję'),
});
 
type InvoiceForm = z.infer<typeof InvoiceSchema>;
 
function InvoiceForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm<InvoiceForm>({
    resolver: zodResolver(InvoiceSchema),
    defaultValues: { customerName: '', items: [{ description: '', quantity: 1, price: 0 }] },
  });
 
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items',
  });
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('customerName')} placeholder="Klient" />
 
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.description`)} placeholder="Opis" />
          <input {...register(`items.${index}.quantity`, { valueAsNumber: true })} type="number" />
          <input {...register(`items.${index}.price`, { valueAsNumber: true })} type="number" step="0.01" />
          <button type="button" onClick={() => remove(index)}>Usuń</button>
        </div>
      ))}
 
      <button type="button" onClick={() => append({ description: '', quantity: 1, price: 0 })}>
        Dodaj pozycję
      </button>
 
      {errors.items && <p>{errors.items.message}</p>}
      <button type="submit">Wystaw fakturę</button>
    </form>
  );
}

useFieldArray zarządza dodawaniem, usuwaniem, reordering. field.id to unikalny klucz (RHF generuje go wewnętrznie) — nie używaj index jako klucz, bo remove/reorder łamie state.

Multi-step forms

Wizard z krokami — najłatwiej przez FormProvider + osobne komponenty per krok.

Code

import { useForm, FormProvider, useFormContext } from 'react-hook-form';
import { useState } from 'react';
 
const WizardSchema = z.object({
  account: z.object({
    email: z.string().email(),
    password: z.string().min(8),
  }),
  profile: z.object({
    firstName: z.string().min(2),
    lastName: z.string().min(2),
    birthdate: z.coerce.date(),
  }),
  preferences: z.object({
    newsletter: z.boolean(),
    theme: z.enum(['light', 'dark']),
  }),
});
 
type WizardForm = z.infer<typeof WizardSchema>;
 
function SignupWizard() {
  const [step, setStep] = useState(0);
  const methods = useForm<WizardForm>({
    resolver: zodResolver(WizardSchema),
    defaultValues: { account: {}, profile: {}, preferences: {} },
  });
 
  const steps = ['account', 'profile', 'preferences'] as const;
 
  const handleNext = async () => {
    const isValid = await methods.trigger(steps[step]);
    if (isValid) setStep(step + 1);
  };
 
  const onSubmit = (data: WizardForm) => {
    // wysłać do API
  };
 
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {step === 0 && <AccountStep />}
        {step === 1 && <ProfileStep />}
        {step === 2 && <PreferencesStep />}
 
        <div>
          {step > 0 && <button type="button" onClick={() => setStep(step - 1)}>Wstecz</button>}
          {step < steps.length - 1 && <button type="button" onClick={handleNext}>Dalej</button>}
          {step === steps.length - 1 && <button type="submit">Zakończ</button>}
        </div>
      </form>
    </FormProvider>
  );
}
 
function AccountStep() {
  const { register, formState: { errors } } = useFormContext<WizardForm>();
 
  return (
    <div>
      <input {...register('account.email')} type="email" />
      {errors.account?.email && <p>{errors.account.email.message}</p>}
 
      <input {...register('account.password')} type="password" />
      {errors.account?.password && <p>{errors.account.password.message}</p>}
    </div>
  );
}

trigger waliduje pojedyncze pola lub grupy — używam go do przejścia do następnego kroku (nie submit, tylko check czy aktualny krok jest valid).

Integracja z shadcn/ui i Radix

Jeśli używasz shadcn/ui, integracja z RHF jest wbudowana:

Code

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
 
function ContactForm() {
  const form = useForm<ContactForm>({
    resolver: zodResolver(ContactSchema),
  });
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} type="email" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Wyślij</Button>
      </form>
    </Form>
  );
}

Więcej kodu niż bezpośredni register, ale dostajesz konsystentny design system, automatyczne pokazywanie błędów, accessibility (labels, aria-describedby) out of the box.

Server-side walidacja — ten sam schema

Genialność Zod: używasz tego samego schema na kliencie i serwerze.

Code

// lib/schemas.ts
import { z } from 'zod';
 
export const ContactSchema = z.object({
  email: z.string().email(),
  message: z.string().min(10),
});
 
// app/api/contact/route.ts
import { ContactSchema } from '@/lib/schemas';
 
export async function POST(request: Request) {
  const body = await request.json();
  const parsed = ContactSchema.safeParse(body);
 
  if (!parsed.success) {
    return Response.json(
      { errors: parsed.error.flatten().fieldErrors },
      { status: 400 }
    );
  }
 
  // parsed.data jest zwalidowany i typowany
  await saveToDatabase(parsed.data);
  return Response.json({ success: true });
}
 
// components/ContactForm.tsx
import { ContactSchema } from '@/lib/schemas';
import { zodResolver } from '@hookform/resolvers/zod';
 
const form = useForm<z.infer<typeof ContactSchema>>({
  resolver: zodResolver(ContactSchema),
});

Jedna walidacja, dwa miejsca. Bez duplikowania logiki. Jeśli dodasz pole, wystarczy zmienić schema — klient i serwer oba dostają update.

Zod 4 — na co uważać

Zod 4 jest stabilny i warto korzystać z jego modelu input / output, szczególnie gdy schema robi transformacje. To ważne w formularzach, bo typ danych wpisanych przez usera nie zawsze jest tym samym typem, który chcesz zapisać w bazie.

Code

const ProductSchema = z.object({
  name: z.string().min(2),
  price: z.coerce.number().positive(),
  availableFrom: z.string().transform((value) => new Date(value)),
});
 
type ProductFormInput = z.input<typeof ProductSchema>;
type ProductPayload = z.output<typeof ProductSchema>;

ProductFormInput opisuje dane z formularza, a ProductPayload dane po walidacji i transformacji. Dzięki temu nie musisz oszukiwać TypeScriptu, gdy HTML input zwraca string, a backend oczekuje liczby albo daty.

React Hook Form vs React 19 Actions

W 2026 roku mamy dwa podejścia do formularzy. Kiedy które?

React 19 Actions (opisane w osobnym artykule) — prostsze, działają bez klientowego JS, dobre dla prostych formularzy.

React Hook Form + Zod — więcej features, lepsze DX dla skomplikowanych formularzy, klientowa walidacja real-time.

Decision tree:

Case	Użyj
Kontakt, newsletter, prosty submit	React 19 Actions
Progressive enhancement (JS optional)	React 19 Actions
Login/signup z szybką walidacją	RHF + Zod
Multi-step wizard	RHF + Zod
Dynamic fields (array/nested)	RHF + Zod
Real-time walidacja (np. email availability)	RHF + Zod
Integracja z custom UI kit	RHF + Zod

Oba mogą współistnieć w jednym projekcie — Actions dla prostych submitów, RHF dla rozbudowanych formularzy.

Typowe pułapki

1. valueAsNumber dla liczb. Bez tego dostajesz string:

Code

<input {...register('age', { valueAsNumber: true })} type="number" />

2. defaultValues vs values. defaultValues ustawia state raz (przy mount). values reaktywnie aktualizuje formularz gdy zmienia się external data — używaj, gdy ładujesz dane z API:

Code

const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });
const form = useForm({ values: user });  // automatyczne update gdy user się zmieni

3. Validation modes. Domyślnie RHF waliduje po submit. Dla real-time feedback ustaw mode: 'onChange' lub mode: 'onBlur':

Code

const form = useForm({
  mode: 'onBlur',  // waliduje przy blur każdego pola
});

4. Reset po submit. Po udanym submit formularz nie resetuje się automatycznie. Dodaj ręcznie:

Code

const onSubmit = async (data) => {
  await saveData(data);
  form.reset();  // albo form.reset(defaultValues)
};

Podsumowanie

React Hook Form + Zod to stack, który pokrywa 90% potrzeb formularzowych. Dla prostych przypadków React 19 Actions mogą wystarczyć, ale gdy tylko dochodzi walidacja real-time, dynamic fields, multi-step wizard albo integracja z custom UI — RHF jest jedynym sensownym wyborem. Zod dokłada type-safe walidację po obu stronach z jednym schema.

Jeśli masz projekt z rozwalonymi formularzami i chcesz je posprzątać — napisz do mnie. W StriveLab React migracje formularzy z useState na RHF + Zod są jedną z najczęstszych usług i zwykle tniemy 50-70% kodu przy jednoczesnej poprawie UX.

Dlaczego nie useState per pole

Klasyczne podejście z lat 2017–2020:

Code

function ContactForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
 
  const validate = () => {
    const newErrors = {};
    if (!email) newErrors.email = 'Email required';
    if (!email.includes('@')) newErrors.email = 'Invalid email';
    if (!name) newErrors.name = 'Name required';
    if (!message || message.length < 10) newErrors.message = 'Message too short';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setIsSubmitting(true);
    // ... fetch call
    setIsSubmitting(false);
  };
 
  return (/* JSX z useState'ami na każdym polu */);
}

Działa, ale problemów jest cała lista:

Każda zmiana re-renderuje cały formularz. Przy 10 polach to 10 re-renderów dla każdego wpisanego znaku.
Walidacja ręczna — łatwo coś pominąć, trudno utrzymać spójność po stronie serwera.
Brak reuse — każdy formularz od nowa.
Brak wsparcia dla dynamicznych pól (dodawanie/usuwanie itemów).

React Hook Form rozwiązuje wszystko powyższe, a Zod dodaje type-safe walidację. Razem — default stack dla każdego nowego formularza.

Instalacja i minimalny setup

Code

npm install react-hook-form zod @hookform/resolvers

Trzy zależności:

react-hook-form — core biblioteka formularzy.
zod — biblioteka walidacji / schema.
@hookform/resolvers — adapter łączący RHF z Zod (albo Yup, Joi, itp.).

Minimalny formularz:

Code

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
 
const ContactSchema = z.object({
  email: z.string().email('Nieprawidłowy email'),
  name: z.string().min(2, 'Imię jest za krótkie'),
  message: z.string().min(10, 'Wiadomość musi mieć co najmniej 10 znaków'),
});
 
type ContactForm = z.infer<typeof ContactSchema>;
 
function ContactForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<ContactForm>({
    resolver: zodResolver(ContactSchema),
  });
 
  const onSubmit = async (data: ContactForm) => {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} type="email" />
      {errors.email && <p>{errors.email.message}</p>}
 
      <input {...register('name')} />
      {errors.name && <p>{errors.name.message}</p>}
 
      <textarea {...register('message')} />
      {errors.message && <p>{errors.message.message}</p>}
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Wysyłanie...' : 'Wyślij'}
      </button>
    </form>
  );
}

Zalety:

register — spinka input ze stanem formularza, bez onChange handlerów.
Walidacja automatyczna — Zod schema → błędy.
Typy wywodzone z Zod schema — z.infer<typeof ContactSchema> daje TypeScript typ.
Minimum re-renderów — RHF pod spodem używa uncontrolled inputs z ref'ami.
isSubmitting — pending state out of the box.

Dla porównania — ten sam formularz w klasycznym podejściu to 60-80 linii.

`register` vs `Controller`

RHF ma dwa API do łączenia inputów ze stanem formularza.

register — działa z natywnymi <input>, <textarea>, <select>. Najlepsze performance, najmniej kodu.

Code

<input {...register('email')} />

Controller — wrapper dla custom components, które nie mają ref-a albo używają nietypowego API (np. date pickery, rich text editory, react-select).

Code

import { Controller } from 'react-hook-form';
import DatePicker from 'react-datepicker';
 
<Controller
  name="date"
  control={control}
  render={({ field }) => (
    <DatePicker
      selected={field.value}
      onChange={field.onChange}
      onBlur={field.onBlur}
    />
  )}
/>

Regulation: wybieraj register kiedy tylko możesz, Controller tylko gdy musisz.

Walidacja — od prostych po zaawansowane

Zod daje świetne API do walidacji. Od prostej po wzajemne zależności pól:

Code

const SignupSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(64),
  confirmPassword: z.string(),
  birthdate: z.coerce.date().max(
    new Date(Date.now() - 18 * 365 * 24 * 60 * 60 * 1000),
    'Musisz mieć co najmniej 18 lat'
  ),
  terms: z.literal(true, {
    errorMap: () => ({ message: 'Musisz zaakceptować regulamin' }),
  }),
}).refine(
  (data) => data.password === data.confirmPassword,
  {
    message: 'Hasła się nie zgadzają',
    path: ['confirmPassword'],
  }
);

Asynchroniczna walidacja

Przykład: sprawdzenie, czy email nie jest zajęty. Zod nie obsługuje async natywnie, ale RHF ma dla tego osobne API:

Code

<input
  {...register('email', {
    validate: {
      unique: async (email) => {
        const response = await fetch(`/api/check-email?email=${email}`);
        const { available } = await response.json();
        return available || 'Email jest już zajęty';
      },
    },
  })}
  type="email"
/>

Validate odpala się po blur pola (konfigurowalne przez mode w useForm). Dla user experience zwykle łączę to z debounce, żeby nie robić requestu po każdej literze.

Dynamic fields — `useFieldArray`

Formularz, gdzie user może dodawać / usuwać items (np. lista gości na wydarzenie, pozycje faktury, custom fields).

Code

import { useFieldArray, useForm } from 'react-hook-form';
 
const InvoiceSchema = z.object({
  customerName: z.string().min(1),
  items: z.array(z.object({
    description: z.string().min(1),
    quantity: z.number().min(1),
    price: z.number().min(0),
  })).min(1, 'Dodaj co najmniej jedną pozycję'),
});
 
type InvoiceForm = z.infer<typeof InvoiceSchema>;
 
function InvoiceForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm<InvoiceForm>({
    resolver: zodResolver(InvoiceSchema),
    defaultValues: { customerName: '', items: [{ description: '', quantity: 1, price: 0 }] },
  });
 
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items',
  });
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('customerName')} placeholder="Klient" />
 
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.description`)} placeholder="Opis" />
          <input {...register(`items.${index}.quantity`, { valueAsNumber: true })} type="number" />
          <input {...register(`items.${index}.price`, { valueAsNumber: true })} type="number" step="0.01" />
          <button type="button" onClick={() => remove(index)}>Usuń</button>
        </div>
      ))}
 
      <button type="button" onClick={() => append({ description: '', quantity: 1, price: 0 })}>
        Dodaj pozycję
      </button>
 
      {errors.items && <p>{errors.items.message}</p>}
      <button type="submit">Wystaw fakturę</button>
    </form>
  );
}

useFieldArray zarządza dodawaniem, usuwaniem, reordering. field.id to unikalny klucz (RHF generuje go wewnętrznie) — nie używaj index jako klucz, bo remove/reorder łamie state.

Multi-step forms

Wizard z krokami — najłatwiej przez FormProvider + osobne komponenty per krok.

Code

import { useForm, FormProvider, useFormContext } from 'react-hook-form';
import { useState } from 'react';
 
const WizardSchema = z.object({
  account: z.object({
    email: z.string().email(),
    password: z.string().min(8),
  }),
  profile: z.object({
    firstName: z.string().min(2),
    lastName: z.string().min(2),
    birthdate: z.coerce.date(),
  }),
  preferences: z.object({
    newsletter: z.boolean(),
    theme: z.enum(['light', 'dark']),
  }),
});
 
type WizardForm = z.infer<typeof WizardSchema>;
 
function SignupWizard() {
  const [step, setStep] = useState(0);
  const methods = useForm<WizardForm>({
    resolver: zodResolver(WizardSchema),
    defaultValues: { account: {}, profile: {}, preferences: {} },
  });
 
  const steps = ['account', 'profile', 'preferences'] as const;
 
  const handleNext = async () => {
    const isValid = await methods.trigger(steps[step]);
    if (isValid) setStep(step + 1);
  };
 
  const onSubmit = (data: WizardForm) => {
    // wysłać do API
  };
 
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {step === 0 && <AccountStep />}
        {step === 1 && <ProfileStep />}
        {step === 2 && <PreferencesStep />}
 
        <div>
          {step > 0 && <button type="button" onClick={() => setStep(step - 1)}>Wstecz</button>}
          {step < steps.length - 1 && <button type="button" onClick={handleNext}>Dalej</button>}
          {step === steps.length - 1 && <button type="submit">Zakończ</button>}
        </div>
      </form>
    </FormProvider>
  );
}
 
function AccountStep() {
  const { register, formState: { errors } } = useFormContext<WizardForm>();
 
  return (
    <div>
      <input {...register('account.email')} type="email" />
      {errors.account?.email && <p>{errors.account.email.message}</p>}
 
      <input {...register('account.password')} type="password" />
      {errors.account?.password && <p>{errors.account.password.message}</p>}
    </div>
  );
}

trigger waliduje pojedyncze pola lub grupy — używam go do przejścia do następnego kroku (nie submit, tylko check czy aktualny krok jest valid).

Integracja z shadcn/ui i Radix

Jeśli używasz shadcn/ui, integracja z RHF jest wbudowana:

Code

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
 
function ContactForm() {
  const form = useForm<ContactForm>({
    resolver: zodResolver(ContactSchema),
  });
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} type="email" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Wyślij</Button>
      </form>
    </Form>
  );
}

Więcej kodu niż bezpośredni register, ale dostajesz konsystentny design system, automatyczne pokazywanie błędów, accessibility (labels, aria-describedby) out of the box.

Server-side walidacja — ten sam schema

Genialność Zod: używasz tego samego schema na kliencie i serwerze.

Code

// lib/schemas.ts
import { z } from 'zod';
 
export const ContactSchema = z.object({
  email: z.string().email(),
  message: z.string().min(10),
});
 
// app/api/contact/route.ts
import { ContactSchema } from '@/lib/schemas';
 
export async function POST(request: Request) {
  const body = await request.json();
  const parsed = ContactSchema.safeParse(body);
 
  if (!parsed.success) {
    return Response.json(
      { errors: parsed.error.flatten().fieldErrors },
      { status: 400 }
    );
  }
 
  // parsed.data jest zwalidowany i typowany
  await saveToDatabase(parsed.data);
  return Response.json({ success: true });
}
 
// components/ContactForm.tsx
import { ContactSchema } from '@/lib/schemas';
import { zodResolver } from '@hookform/resolvers/zod';
 
const form = useForm<z.infer<typeof ContactSchema>>({
  resolver: zodResolver(ContactSchema),
});

Jedna walidacja, dwa miejsca. Bez duplikowania logiki. Jeśli dodasz pole, wystarczy zmienić schema — klient i serwer oba dostają update.

Zod 4 — na co uważać

Code

const ProductSchema = z.object({
  name: z.string().min(2),
  price: z.coerce.number().positive(),
  availableFrom: z.string().transform((value) => new Date(value)),
});
 
type ProductFormInput = z.input<typeof ProductSchema>;
type ProductPayload = z.output<typeof ProductSchema>;

React Hook Form vs React 19 Actions

W 2026 roku mamy dwa podejścia do formularzy. Kiedy które?

React 19 Actions (opisane w osobnym artykule) — prostsze, działają bez klientowego JS, dobre dla prostych formularzy.

React Hook Form + Zod — więcej features, lepsze DX dla skomplikowanych formularzy, klientowa walidacja real-time.

Decision tree:

Case	Użyj
Kontakt, newsletter, prosty submit	React 19 Actions
Progressive enhancement (JS optional)	React 19 Actions
Login/signup z szybką walidacją	RHF + Zod
Multi-step wizard	RHF + Zod
Dynamic fields (array/nested)	RHF + Zod
Real-time walidacja (np. email availability)	RHF + Zod
Integracja z custom UI kit	RHF + Zod

Oba mogą współistnieć w jednym projekcie — Actions dla prostych submitów, RHF dla rozbudowanych formularzy.

Typowe pułapki

1. valueAsNumber dla liczb. Bez tego dostajesz string:

Code

<input {...register('age', { valueAsNumber: true })} type="number" />

2. defaultValues vs values. defaultValues ustawia state raz (przy mount). values reaktywnie aktualizuje formularz gdy zmienia się external data — używaj, gdy ładujesz dane z API:

Code

const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });
const form = useForm({ values: user });  // automatyczne update gdy user się zmieni

3. Validation modes. Domyślnie RHF waliduje po submit. Dla real-time feedback ustaw mode: 'onChange' lub mode: 'onBlur':

Code

const form = useForm({
  mode: 'onBlur',  // waliduje przy blur każdego pola
});

4. Reset po submit. Po udanym submit formularz nie resetuje się automatycznie. Dodaj ręcznie:

Code

const onSubmit = async (data) => {
  await saveData(data);
  form.reset();  // albo form.reset(defaultValues)
};

React Hook Form + Zod — kompletny stack formularzowy, który skaluje się do dowolnego projektu

Dlaczego nie useState per pole

Instalacja i minimalny setup

`register` vs `Controller`

Walidacja — od prostych po zaawansowane

Asynchroniczna walidacja

Dynamic fields — `useFieldArray`

Multi-step forms

Integracja z shadcn/ui i Radix

Server-side walidacja — ten sam schema

Zod 4 — na co uważać

React Hook Form vs React 19 Actions

Typowe pułapki

Podsumowanie

Czytaj dalej

React Hook Form + Zod — kompletny stack formularzowy, który skaluje się do dowolnego projektu

Dlaczego nie useState per pole

Instalacja i minimalny setup

`register` vs `Controller`

Walidacja — od prostych po zaawansowane

Asynchroniczna walidacja

Dynamic fields — `useFieldArray`

Multi-step forms

Integracja z shadcn/ui i Radix

Server-side walidacja — ten sam schema

Zod 4 — na co uważać

React Hook Form vs React 19 Actions

Typowe pułapki

Podsumowanie

Czytaj dalej

Dlaczego nie useState per pole

Instalacja i minimalny setup

register vs Controller

Walidacja — od prostych po zaawansowane

Asynchroniczna walidacja

Dynamic fields — useFieldArray

Multi-step forms

Integracja z shadcn/ui i Radix

Server-side walidacja — ten sam schema

Zod 4 — na co uważać

React Hook Form vs React 19 Actions

Typowe pułapki

Podsumowanie

Czytaj dalej

Dlaczego nie useState per pole

Instalacja i minimalny setup

register vs Controller

Walidacja — od prostych po zaawansowane

Asynchroniczna walidacja

Dynamic fields — useFieldArray

Multi-step forms

Integracja z shadcn/ui i Radix

Server-side walidacja — ten sam schema

Zod 4 — na co uważać

React Hook Form vs React 19 Actions

Typowe pułapki

Podsumowanie

Czytaj dalej

`register` vs `Controller`

Dynamic fields — `useFieldArray`

`register` vs `Controller`

Dynamic fields — `useFieldArray`