Installation

To use Conform, you need to install it along with the schema library you want to support.

#Zod

If you are using Zod, install the validation helper library that supports Zod schemas.

npm install @conform-to/react @conform-to/zod zod

To validate FormData, use parseWithZod.

import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string(),
  password: z.string(),
});

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema,
      });
    },
  });

  // ...
}

#Valibot

If you are using Valibot, install the validation helper library that supports Valibot schemas.

npm install @conform-to/react @conform-to/valibot valibot

To validate FormData, use parseWithValibot.

import { useForm } from '@conform-to/react';
import { parseWithValibot } from '@conform-to/valibot';
import { object, string } from 'valibot';

const schema = object({
  email: string(),
  password: string(),
});

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parseWithValibot(formData, {
        schema,
      });
    },
  });

  // ...
}

#Yup

If you are using Yup, install the validation helper library that supports Yup schemas.

npm install @conform-to/react @conform-to/yup yup

To validate FormData, use parseWithYup.

import { useForm } from '@conform-to/react';
import { parseWithYup } from '@conform-to/yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string(),
  password: yup.string(),
});

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parseWithYup(formData, {
        schema,
      });
    },
  });

  // ...
}