Conform · Function

getYupConstraint

getYupConstraint converts a Yup schema into per-field validation attributes. Pass its result to useForm through the constraint option.

How it works

getYupConstraint introspects a Yup schema and produces the validation attributes for its fields. Pass its result as the constraint option when configuring Conform's useForm hook.

Syntax

getYupConstraint(schema)

Parameters

Name	Type	Description
`schema`	`Yup schema`	The Yup schema whose field rules should be converted into validation attributes.

Returns

An object containing validation attributes for each field in the Yup schema.

Key points

It produces a field-oriented constraints object rather than a single boolean or error list.
The helper derives constraints by examining the rules declared in the Yup schema.
The function is called with the schema as its sole input.
Use the returned value as the constraint option in useForm configuration.
Import the helper from Conform's Yup integration package.

Common mistakes

Pass the schema itself, rather than parsed form data or a validation result.

Example: Derive form constraints from a Yup schema

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

const schema = yup.object({
  title: yup.string().required().min(5).max(20),
  description: yup.string().optional().min(100).max(1000),
});

function Example() {
  const [form, fields] = useForm({
    constraint: getYupConstraint(schema),
  });

  return <form {...form.props}>{/* render fields */}</form>;
}

Create a Yup schema, pass it to getYupConstraint, and provide the returned constraints to useForm so field metadata can expose matching HTML validation attributes.

When to use it

Derive browser constraints

A form uses Yup rules and should expose corresponding browser validation metadata through Conform field metadata.

Configure useForm from Yup

A useForm configuration needs constraints generated directly from an existing Yup object schema.

Interview questions

QWhat does getYupConstraint do?

getYupConstraint accepts a Yup schema and returns an object containing validation attributes for each field. The helper derives those attributes by inspecting the schema, then the result can be supplied to useForm through its constraint option.

Follow-up: How would you connect this to submission validation? Use parseWithYup separately to parse FormData with the same Yup schema; constraint generation does not replace server-side parsing.

QHow is getYupConstraint used with useForm?

Define the schema with Yup, import getYupConstraint from @conform-to/yup, and pass getYupConstraint(schema) as useForm's constraint. Conform can then populate field metadata with the derived browser validation attributes.

Follow-up: What should be kept consistent? Use the same schema for constraint generation and parseWithYup so client-facing attributes and submitted-data validation reflect the same rules.

QWhat is the input and scope of the helper?

The function operates on the Yup schema structure rather than on an individual field value. Its output is a constraints object covering the fields represented by that schema.

Follow-up: What happens if a rule cannot be represented by an HTML attribute? Keep the schema-based parsing step as the authoritative validation because browser constraints cannot express every Yup rule.

useForm
parseWithYup
@conform-to/yup
Yup schema

Source: getYupConstraint - conform.guide. Checked 2026-10-15.