A hand-made schema with safeParse
Each field has a list of checks; the first failing one gives the message. Zod's real API is richer (types, transforms, nested objects, arrays), but safeParse returning success or errors is the same idea.
React Hook Form manages field registration, submission, errors and touched state for you (mostly with uncontrolled inputs), and Zod describes your data's rules as a schema you can reuse on the client and the server; for small forms plain React is enough.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Extend the hand-made useForm to return a reset() function that puts the defaults back and clears touched and submitted.
Write a Zod schema (non-live) for a contact form: name required, email valid, message 10–500 characters, and show how to validate a request body with it.
Explain it without notes
Why do form libraries exist? Name the repetitive parts they handle.
How do register and handleSubmit work in React Hook Form?
What is a schema library like Zod for, and why is sharing a schema with the server valuable?
When would you not use a form library?
Preview
Console
Nothing logged yet.Expected console output
1 { success: false, errors: { email: 'Enter your email', password: 'Use at least 8 characters' } }
2 { success: false, errors: { email: 'Enter an email like name@example.com' } }
3 { success: true, data: { email: 'asha@example.com', password: 'secret123' } }