@conform-to/zod
Conform helpers for integrating with Zod
API Reference
getFieldsetConstraint
This tries to infer constraint of each field based on the zod schema. This is useful for:
- Making it easy to style input using CSS, e.g.
:required
- Having some basic validation working before/without JS
import { useForm } from '@conform-to/react';
import { getFieldsetConstraint } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
email: z.string().min(1, 'Email is required'),
password: z.string().min(1, 'Password is required'),
});
function Example() {
const [form, { email, password }] = useForm({
constraint: getFieldsetConstraint(schema),
});
}
parse
It parses the formData and returns a submission result with the validation error. If no error is found, the parsed data will also be populated as submission.value
.
import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
email: z.string().min(1, 'Email is required'),
password: z.string().min(1, 'Password is required'),
});
function ExampleForm() {
const [form, { email, password }] = useForm({
onValidate({ formData }) {
return parse(formData, { schema });
},
});
}
Or when parsing the formData on server side (e.g. Remix):
import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
});
export let action = async ({ request }) => {
const formData = await request.formData();
const submission = await parse(formData, {
schema: schema.refine(),
async: true,
});
if (!submission.value || submission.intent !== 'submit') {
return submission;
}
};