shadcn Form Lab — react-hook-form + zod

One zod schema is the single source of truth — it types the form and validates it. Type invalid values and watch field-level errors and form state update live.

3–20 chars, letters/numbers/underscore
≥ 8 chars, at least one number

✓ Submitted! Check the parsed values in state.

Form state

// the schema types AND validates const schema = z.object({ username: z.string().min(3).max(20).regex(/^\w+$/), email: z.string().email(), age: z.coerce.number().int().min(13), password: z.string().min(8).regex(/\d/), }); type FormValues = z.infer<typeof schema>;