Best way to type a generic form component with react-hook-form and Zod?

Dev Overflow

Home

Community

Collections

Find Jobs

asked 1 month ago

643

I want one <AuthForm /> that works for both sign-in and sign-up, driven by whichever Zod schema I hand it.

1interface Props<T extends FieldValues> {
2  schema: z.ZodType<T>
3  defaultValues: T
4}

1interface Props<T extends FieldValues> {
2  schema: z.ZodType<T>
3  defaultValues: T
4}

TypeScript then complains that Resolver<FieldValues, any, T> is not assignable to Resolver<T, any, T>. What is the correct way to express this?

Priya Raut

• answered 1 month ago

Zod 4's ZodType<T> leaves the input side as unknown, while the resolver requires the input to extend FieldValues. Pin both sides:

1schema: z.ZodType<T, T>

1schema: z.ZodType<T, T>

With the input typed as T, standardSchemaResolver infers Resolver<T, unknown, T> and the assignment succeeds — no cast needed.

of 1

Git: how do I undo a commit I already pushed?

Rust: what is the actual difference between String and &str?

How should I hash passwords in 2026 — bcrypt, scrypt, or argon2?

Is storing a JWT in localStorage really that dangerous?

What is the difference between unit, integration, and e2e tests in practice?

Global search