React Hook Form Resolvers Examples You Can Edit and Run

5 small React Hook Form Resolvers examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.

React Hook Form Resolvers: usage and stats 498 AI-built projects use it

Zod validation with zodResolver: screenshot of the example running

Zod validation with zodResolverErrors show on load; type a name and a username of 3+ characters, then press Sign up to see the submitted values.

Number fields with zodResolver: screenshot of the example running

Number fields with zodResolverThe form validates on load; set age to 18+ and seats to 1+, then press Book.

Schema defaults with zodResolver: screenshot of the example running

Schema defaults with zodResolverThe form submits once on load; change the name and press Save to see the defaults added again.

Showing every error with criteriaMode: screenshot of the example running

Showing every error with criteriaModeBoth forms validate on load; type a short password in each and press Check to compare the messages.

Resolver options: raw values vs parsed values: screenshot of the example running

Resolver options: raw values vs parsed valuesBoth forms submit on load; edit the names and press Submit to compare the two outputs again.

Try them all in one place

import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Name is required' }),
  username: z.string().min(3, { message: 'Username needs at least 3 characters' }),
});

const label = { display: 'block', margin: '10px 0 4px', fontWeight: 600 };
const input = { width: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 8, border: '1px solid #cbd5e1' };
const err = { color: '#dc2626', margin: '4px 0 0', fontSize: 13 };

export default function App() {
  const [result, setResult] = useState(null);
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
    defaultValues: { name: '', username: 'ab' },
  });
  const submit = handleSubmit((data) => setResult(data), () => setResult(null));

  // Submit once on load so the error messages are visible right away
  useEffect(() => { submit(); }, []);

  return (
    <div style={{ height: 360, background: '#111', display: 'grid', placeItems: 'center' }}>
      <form onSubmit={submit} style={{ width: 340, padding: 20, borderRadius: 14, background: '#fff', color: '#111', font: '14px system-ui' }}>
        <label style={label}>Name</label>
        <input {...register('name')} style={input} />
        {errors.name?.message && <p style={err}>{errors.name?.message}</p>}

        <label style={label}>Username</label>
        <input {...register('username')} style={input} />
        {errors.username?.message && <p style={err}>{errors.username?.message}</p>}

        <button type="submit" style={{ marginTop: 14, padding: '8px 16px', border: 0, borderRadius: 8, background: '#2563eb', color: '#fff', fontWeight: 600 }}>
          Sign up
        </button>
        <p style={{ margin: '12px 0 0', color: '#475569', fontSize: 13 }}>
          {result ? `Submitted: ${JSON.stringify(result)}` : 'Not submitted yet'}
        </p>
      </form>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Errors show on load; type a name and a username of 3+ characters, then press Sign up to see the submitted values. Code written by AgentGid [1]. How it works, with a screenshot →

Checked Oct 12, 2026: each example starts without errors in Chromium with @hookform/resolvers 5.9.1, react 19.3.0, react-dom 19.3.0, react-hook-form 7.90.0, zod 4.6.6. Needs WebGL.

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Hook Form Resolvers? Ask AgentGid →