Skip to Content
Prism UI
Integrations

Combining RHF and Zod

How native RHF rules and a Zod resolver interact on the same form.

@prismrepo/adapter-rhf and @prismrepo/adapter-zod are independent packages, neither depends on the other, but they're designed to be used together through React Hook Form's own mechanisms, not a Prism-specific bridge.

One resolver per form

usePrismForm's options.resolver is React Hook Form's own single resolver slot. A Zod schema passed through createZodResolver becomes the form's whole-form validation:

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
});

const form = usePrismForm(definition, {
  defaultValues: { name: '', email: '' },
  resolver: createZodResolver(schema),
});

PrismField's rules prop alongside a resolver

PrismField's rules prop still passes straight through to Controller, even when a resolver is set on the form. React Hook Form runs both: a field's native rules validate that field directly, in addition to whatever the resolver's schema says about the whole form. In practice, most consumers pick one strategy per form, a single Zod schema for the whole form, or native rules per field, rather than mixing both for the same field, to avoid two independent sources of truth for one field's validity.

Prefer a single Zod schema covering the entire form's shape, including cross-field rules via .refine(), see Custom Validation. Reserve rules for genuinely native RHF behaviors a Zod schema can't express as cleanly, for example deps (cross-field re-validation triggers) or shouldUnregister, both of which are native RHF RegisterOptions with no Zod equivalent.

On this page