Standard schema validation
Validate submitted form data against a Zod or Valibot schema while retaining inferred form types.
Conform · Const
schema integration
Pass a Standard Schema-compatible schema as the first useForm argument to enable validation and schema-derived type inference. Conform validates it before onValidate and exposes the parsed result through ctx.schemaValue when successful.
How it works
Schema integration lets useForm accept a Standard Schema-compatible schema as its first argument. Conform validates with that schema before onValidate, exposes the parsed result through ctx.schemaValue after success, and forwards schemaOptions to the configured validator.
Syntax
useForm(schema, options)Parameters
| Name | Type | Description |
|---|---|---|
schema | Schema | A Standard Schema-compatible validation schema used for validation and type inference. |
options | UseFormOptions | Configuration for the form, including optional schemaOptions forwarded to the validator. |
Returns
A form and field metadata tuple from useForm, with schema validation and schema-derived type inference enabled.
Key points
- Provide the schema as useForm's first argument; options remain the second argument.
- The integration enables both runtime validation and types inferred from the schema.
- Schema validation executes before the onValidate callback.
- After successful validation, the parsed schema value is available through ctx.schemaValue.
- Validator-specific schemaOptions are passed through to the configured schema validator.
- useForm works with libraries that implement the Standard Schema compatibility contract.
Common mistakes
- Passing a schema changes validation behavior; omit it and use the options-only form when validation is entirely manual.
- Schema validation does not prevent onValidate from adding errors or replacing the schema validator's errors.
Example: Schema passed to useForm
import { useForm } from '@conform-to/react';
import { z } from 'zod';
const schema = z.object({
email: z.string().email(),
});
export function SignupForm() {
const [form, fields] = useForm(schema);
return (
<form {...form.props}>
<input {...fields.email.props} />
</form>
);
}Pass the schema as the first argument to useForm so Conform can validate against it and infer schema-derived types.
When to use it
Use parsed schema values
Read the parsed, successfully validated value during validation handling.
Configure schema validation
Forward validator-specific configuration without manually invoking the schema library.
Interview questions
QWhat does schema integration in useForm provide?
useForm accepts a Standard Schema-compatible library when the schema is supplied as its first argument. This enables schema validation and schema-derived type inference.
Follow-up: How can another schema system be supported? Use configureForms with custom isSchema and validateSchema functions.
QHow does schema validation interact with onValidate?
Conform runs schema validation before onValidate. The callback can then add new errors or replace the errors produced by schema validation.
Follow-up: What happens after successful parsing? The parsed value is available as ctx.schemaValue during validation handling.
QWhat is the purpose of schemaOptions?
schemaOptions are forwarded to the configured schema validator when useForm(schema, options) is used. This allows validator-specific configuration without changing the schema itself.
Follow-up: What if the schema library is not Standard Schema-compatible? Configure a customized form hook with configureForms.
Related
useFormschemaOptionsonValidatectx.schemaValueconfigureFormsStandard Schema