@conform-to/yup

Conform helpers for integrating with Yup

getFieldsetConstraint

This tries to infer constraint of each field based on the yup schema. This is useful for:

Making it easy to style input using CSS, e.g. :required
Having some basic validation working before/without JS.

1import { useForm } from '@conform-to/react';
2import { getFieldsetConstraint } from '@conform-to/yup';
3import * as yup from 'yup';
4
5const schema = yup.object({
6  email: yup.string().required(),
7  password: yup.string().required(),
8});
9
10function Example() {
11  const [form, { email, password }] = useForm({
12    constraint: getFieldsetConstraint(schema),
13  });
14
15  // ...
16}
17

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.

1import { useForm } from '@conform-to/react';
2import { parse } from '@conform-to/yup';
3import * as yup from 'yup';
4
5const schema = yup.object({
6  email: yup.string().required(),
7  password: yup.string().required(),
8});
9
10function ExampleForm() {
11  const [form] = useForm({
12    onValidate({ formData }) {
13      return parse(formData, { schema });
14    },
15  });
16
17  // ...
18}
19

Or when parsing the formData on server side (e.g. Remix):

1import { useForm } from '@conform-to/react';
2import { parse } from '@conform-to/yup';
3import * as yup from 'yup';
4
5const schema = yup.object({
6  // Define the schema with yup
7});
8
9export async function action({ request }) {
10  const formData = await request.formData();
11  const submission = parse(formData, {
12    // If you need extra validation on server side
13    schema: schema.test(/* ... */),
14
15    // If the schema definition includes async validation
16    async: true,
17  });
18
19  if (submission.intent !== 'submit' || !submission.value) {
20    return submission;
21  }
22
23  // ...
24}
25