Populate useForm constraints
Use a Zod schema as the single source for browser-facing field constraints in a Conform form.
Conform · Function
getZodConstraint
getZodConstraint introspects a Zod schema and returns field-level validation attributes. Pass the result to Conform's useForm constraint option to derive native form constraints automatically.
How it works
getZodConstraint introspects a Zod schema and converts supported rules into field-level HTML validation attributes. The resulting object can be supplied as the constraint option to useForm, allowing Conform to populate metadata such as required, minLength, maxLength, and pattern.
Syntax
getZodConstraint(schema)Parameters
| Name | Type | Description |
|---|---|---|
schema | Zod schema | The Zod schema to introspect. |
Returns
An object containing validation attributes for each field.
Key points
- It produces a field-keyed object of validation attributes by examining the Zod schema.
- The helper derives constraints through schema introspection rather than requiring each HTML attribute to be written manually.
- Call it with the schema whose validation rules should become form constraints.
- A required string with minimum and maximum length becomes required, minLength, and maxLength attributes.
- An optional field keeps its length constraints while setting required to false.
- Multiple regex validators can be combined into a generated pattern attribute.
Common mistakes
- Case-insensitive regular expressions do not produce a pattern constraint.
- Combining regex validators that use numbered backreferences can create an invalid or incorrect pattern.
- If backreferences are needed, named groups are the safer choice.
Example: Derive native constraints from a Zod schema
import { getZodConstraint } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
title: z.string().min(5).max(20),
description: z.string().min(100).max(1000).optional(),
});
const constraint = getZodConstraint(schema);
console.log(constraint.title.minLength); // 5
Create a Zod object schema, pass it to getZodConstraint, and use the returned field attributes with Conform or inspect them directly.
When to use it
Enable client-side constraint hints
Expose length and requiredness rules through native HTML validation attributes.
Derive pattern validation
Translate supported regular-expression rules into an HTML pattern attribute.
Interview questions
QWhat does getZodConstraint return and why is it useful?
It introspects the supplied Zod schema and returns validation attributes for each field. These attributes can then be passed to Conform so field metadata includes browser-compatible constraints.
Follow-up: How are regex rules represented? Supported regular expressions are serialized into a pattern attribute, but generation is best-effort and has limitations around flags and backreferences.
QHow is the result connected to a Conform form?
Use the returned value as the constraint option in useForm. This lets Conform derive native attributes such as required, minLength, maxLength, and pattern from the schema.
Follow-up: What should still perform authoritative validation? The schema-based server validation, such as parseWithZod, because browser constraints are client-side assistance rather than a replacement for server validation.
QWhich kinds of constraints can it derive?
The helper supports Zod schemas containing rules such as requiredness, string length limits, and regular expressions. Optional fields are represented with required set to false, while supported length rules become minLength or maxLength.
Follow-up: What happens with an unsupported regex form? No usable pattern may be generated, so the schema validation remains the source of truth even when native HTML validation cannot mirror it.
Related
useFormparseWithZodValidation attributesZod schema