Performant, flexible and extensible forms with easy to use validation.

Install

npm install @hookform/resolvers

Links

• React-hook-form validation resolver documentation

Supported resolvers

• Install
• Links
  • Supported resolvers
• API
• Quickstart
  • Yup
  • Zod
  • Superstruct
  • Joi
  • Vest
  • Class Validator
  • io-ts
  • Nope
  • computed-types
  • typanion
  • Ajv
  • TypeBox
    • With ValueCheck
    • With TypeCompiler
  • ArkType
  • Valibot
  • TypeSchema
  • effect-ts
  • VineJS
  • fluentvalidation-ts
• Backers
  • Sponsors
• Contributors

API

type Options = {
  mode: 'async' | 'sync',
  raw?: boolean
}

resolver(schema: object, schemaOptions?: object, resolverOptions: Options)

	type	Required	Description
schema	object	✓	validation schema
schemaOptions	object		validation library schema options
resolverOptions	object		resolver options, async is the default mode

Quickstart

Yup

Dead simple Object schema validation.

1import { useForm } from 'react-hook-form';
2import { yupResolver } from '@hookform/resolvers/yup';
3import * as yup from 'yup';
4
5const schema = yup
6  .object()
7  .shape({
8    name: yup.string().required(),
9    age: yup.number().required(),
10  })
11  .required();
12
13const App = () => {
14  const { register, handleSubmit } = useForm({
15    resolver: yupResolver(schema),
16  });
17
18  return (
19    <form onSubmit={handleSubmit((d) => console.log(d))}>
20      <input {...register('name')} />
21      <input type="number" {...register('age')} />
22      <input type="submit" />
23    </form>
24  );
25};

Zod

TypeScript-first schema validation with static type inference

⚠️ Example below uses the valueAsNumber, which requires react-hook-form v6.12.0 (released Nov 28, 2020) or later.

1import { useForm } from 'react-hook-form';
2import { zodResolver } from '@hookform/resolvers/zod';
3import * as z from 'zod';
4
5const schema = z.object({
6  name: z.string().min(1, { message: 'Required' }),
7  age: z.number().min(10),
8});
9
10const App = () => {
11  const {
12    register,
13    handleSubmit,
14    formState: { errors },
15  } = useForm({
16    resolver: zodResolver(schema),
17  });
18
19  return (
20    <form onSubmit={handleSubmit((d) => console.log(d))}>
21      <input {...register('name')} />
22      {errors.name?.message && <p>{errors.name?.message}</p>}
23      <input type="number" {...register('age', { valueAsNumber: true })} />
24      {errors.age?.message && <p>{errors.age?.message}</p>}
25      <input type="submit" />
26    </form>
27  );
28};

Superstruct

A simple and composable way to validate data in JavaScript (or TypeScript).

1import { useForm } from 'react-hook-form';
2import { superstructResolver } from '@hookform/resolvers/superstruct';
3import { object, string, number } from 'superstruct';
4
5const schema = object({
6  name: string(),
7  age: number(),
8});
9
10const App = () => {
11  const { register, handleSubmit } = useForm({
12    resolver: superstructResolver(schema),
13  });
14
15  return (
16    <form onSubmit={handleSubmit((d) => console.log(d))}>
17      <input {...register('name')} />
18      <input type="number" {...register('age', { valueAsNumber: true })} />
19      <input type="submit" />
20    </form>
21  );
22};

Joi

The most powerful data validation library for JS.

1import { useForm } from 'react-hook-form';
2import { joiResolver } from '@hookform/resolvers/joi';
3import Joi from 'joi';
4
5const schema = Joi.object({
6  name: Joi.string().required(),
7  age: Joi.number().required(),
8});
9
10const App = () => {
11  const { register, handleSubmit } = useForm({
12    resolver: joiResolver(schema),
13  });
14
15  return (
16    <form onSubmit={handleSubmit((d) => console.log(d))}>
17      <input {...register('name')} />
18      <input type="number" {...register('age')} />
19      <input type="submit" />
20    </form>
21  );
22};

Vest

Vest 🦺 Declarative Validation Testing.

1import { useForm } from 'react-hook-form';
2import { vestResolver } from '@hookform/resolvers/vest';
3import { create, test, enforce } from 'vest';
4
5const validationSuite = create((data = {}) => {
6  test('username', 'Username is required', () => {
7    enforce(data.username).isNotEmpty();
8  });
9
10  test('password', 'Password is required', () => {
11    enforce(data.password).isNotEmpty();
12  });
13});
14
15const App = () => {
16  const { register, handleSubmit, errors } = useForm({
17    resolver: vestResolver(validationSuite),
18  });
19
20  return (
21    <form onSubmit={handleSubmit((data) => console.log(data))}>
22      <input {...register('username')} />
23      <input type="password" {...register('password')} />
24      <input type="submit" />
25    </form>
26  );
27};

Class Validator

Decorator-based property validation for classes.

⚠️ Remember to add these options to your tsconfig.json!

"strictPropertyInitialization": false,
"experimentalDecorators": true

1import { useForm } from 'react-hook-form';
2import { classValidatorResolver } from '@hookform/resolvers/class-validator';
3import { Length, Min, IsEmail } from 'class-validator';
4
5class User {
6  @Length(2, 30)
7  username: string;
8
9  @IsEmail()
10  email: string;
11}
12
13const resolver = classValidatorResolver(User);
14
15const App = () => {
16  const {
17    register,
18    handleSubmit,
19    formState: { errors },
20  } = useForm<User>({ resolver });
21
22  return (
23    <form onSubmit={handleSubmit((data) => console.log(data))}>
24      <input type="text" {...register('username')} />
25      {errors.username && <span>{errors.username.message}</span>}
26      <input type="text" {...register('email')} />
27      {errors.email && <span>{errors.email.message}</span>}
28      <input type="submit" value="Submit" />
29    </form>
30  );
31};

io-ts

Validate your data with powerful decoders.

1import React from 'react';
2import { useForm } from 'react-hook-form';
3import { ioTsResolver } from '@hookform/resolvers/io-ts';
4import t from 'io-ts';
5// you don't have to use io-ts-types, but it's very useful
6import tt from 'io-ts-types';
7
8const schema = t.type({
9  username: t.string,
10  age: tt.NumberFromString,
11});
12
13const App = () => {
14  const { register, handleSubmit } = useForm({
15    resolver: ioTsResolver(schema),
16  });
17
18  return (
19    <form onSubmit={handleSubmit((d) => console.log(d))}>
20      <input {...register('username')} />
21      <input type="number" {...register('age')} />
22      <input type="submit" />
23    </form>
24  );
25};
26
27export default App;

Nope

A small, simple, and fast JS validator

1import { useForm } from 'react-hook-form';
2import { nopeResolver } from '@hookform/resolvers/nope';
3import Nope from 'nope-validator';
4
5const schema = Nope.object().shape({
6  name: Nope.string().required(),
7  age: Nope.number().required(),
8});
9
10const App = () => {
11  const { register, handleSubmit } = useForm({
12    resolver: nopeResolver(schema),
13  });
14
15  return (
16    <form onSubmit={handleSubmit((d) => console.log(d))}>
17      <input {...register('name')} />
18      <input type="number" {...register('age')} />
19      <input type="submit" />
20    </form>
21  );
22};

computed-types

TypeScript-first schema validation with static type inference

1import { useForm } from 'react-hook-form';
2import { computedTypesResolver } from '@hookform/resolvers/computed-types';
3import Schema, { number, string } from 'computed-types';
4
5const schema = Schema({
6  username: string.min(1).error('username field is required'),
7  age: number,
8});
9
10const App = () => {
11  const {
12    register,
13    handleSubmit,
14    formState: { errors },
15  } = useForm({
16    resolver: computedTypesResolver(schema),
17  });
18
19  return (
20    <form onSubmit={handleSubmit((d) => console.log(d))}>
21      <input {...register('name')} />
22      {errors.name?.message && <p>{errors.name?.message}</p>}
23      <input type="number" {...register('age', { valueAsNumber: true })} />
24      {errors.age?.message && <p>{errors.age?.message}</p>}
25      <input type="submit" />
26    </form>
27  );
28};

typanion

Static and runtime type assertion library with no dependencies

1import { useForm } from 'react-hook-form';
2import { typanionResolver } from '@hookform/resolvers/typanion';
3import * as t from 'typanion';
4
5const isUser = t.isObject({
6  username: t.applyCascade(t.isString(), [t.hasMinLength(1)]),
7  age: t.applyCascade(t.isNumber(), [
8    t.isInteger(),
9    t.isInInclusiveRange(1, 100),
10  ]),
11});
12
13const App = () => {
14  const {
15    register,
16    handleSubmit,
17    formState: { errors },
18  } = useForm({
19    resolver: typanionResolver(isUser),
20  });
21
22  return (
23    <form onSubmit={handleSubmit((d) => console.log(d))}>
24      <input {...register('name')} />
25      {errors.name?.message && <p>{errors.name?.message}</p>}
26      <input type="number" {...register('age')} />
27      {errors.age?.message && <p>{errors.age?.message}</p>}
28      <input type="submit" />
29    </form>
30  );
31};

Ajv

The fastest JSON validator for Node.js and browser

1import { useForm } from 'react-hook-form';
2import { ajvResolver } from '@hookform/resolvers/ajv';
3
4// must use `minLength: 1` to implement required field
5const schema = {
6  type: 'object',
7  properties: {
8    username: {
9      type: 'string',
10      minLength: 1,
11      errorMessage: { minLength: 'username field is required' },
12    },
13    password: {
14      type: 'string',
15      minLength: 1,
16      errorMessage: { minLength: 'password field is required' },
17    },
18  },
19  required: ['username', 'password'],
20  additionalProperties: false,
21};
22
23const App = () => {
24  const {
25    register,
26    handleSubmit,
27    formState: { errors },
28  } = useForm({
29    resolver: ajvResolver(schema),
30  });
31
32  return (
33    <form onSubmit={handleSubmit((data) => console.log(data))}>
34      <input {...register('username')} />
35      {errors.username && <span>{errors.username.message}</span>}
36      <input {...register('password')} />
37      {errors.password && <span>{errors.password.message}</span>}
38      <button type="submit">submit</button>
39    </form>
40  );
41};

TypeBox

JSON Schema Type Builder with Static Type Resolution for TypeScript

With ValueCheck

1import { useForm } from 'react-hook-form';
2import { typeboxResolver } from '@hookform/resolvers/typebox';
3import { Type } from '@sinclair/typebox';
4
5const schema = Type.Object({
6  username: Type.String({ minLength: 1 }),
7  password: Type.String({ minLength: 1 }),
8});
9
10const App = () => {
11  const { register, handleSubmit } = useForm({
12    resolver: typeboxResolver(schema),
13  });
14
15  return (
16    <form onSubmit={handleSubmit((d) => console.log(d))}>
17      <input {...register('username')} />
18      <input type="password" {...register('password')} />
19      <input type="submit" />
20    </form>
21  );
22};

With TypeCompiler

A high-performance JIT of TypeBox, read more

1import { useForm } from 'react-hook-form';
2import { typeboxResolver } from '@hookform/resolvers/typebox';
3import { Type } from '@sinclair/typebox';
4import { TypeCompiler } from '@sinclair/typebox/compiler';
5
6const schema = Type.Object({
7  username: Type.String({ minLength: 1 }),
8  password: Type.String({ minLength: 1 }),
9});
10
11const typecheck = TypeCompiler.Compile(schema);
12
13const App = () => {
14  const { register, handleSubmit } = useForm({
15    resolver: typeboxResolver(typecheck),
16  });
17
18  return (
19    <form onSubmit={handleSubmit((d) => console.log(d))}>
20      <input {...register('username')} />
21      <input type="password" {...register('password')} />
22      <input type="submit" />
23    </form>
24  );
25};

ArkType

TypeScript's 1:1 validator, optimized from editor to runtime

1import { useForm } from 'react-hook-form';
2import { arktypeResolver } from '@hookform/resolvers/arktype';
3import { type } from 'arktype';
4
5const schema = type({
6  username: 'string>1',
7  password: 'string>1',
8});
9
10const App = () => {
11  const { register, handleSubmit } = useForm({
12    resolver: arktypeResolver(schema),
13  });
14
15  return (
16    <form onSubmit={handleSubmit((d) => console.log(d))}>
17      <input {...register('username')} />
18      <input type="password" {...register('password')} />
19      <input type="submit" />
20    </form>
21  );
22};

Valibot

The modular and type safe schema library for validating structural data

1import { useForm } from 'react-hook-form';
2import { valibotResolver } from '@hookform/resolvers/valibot';
3import * as v from 'valibot';
4
5const schema = v.object({
6  username: v.pipe(
7    v.string('username is required'),
8    v.minLength(3, 'Needs to be at least 3 characters'),
9    v.endsWith('cool', 'Needs to end with `cool`'),
10  ),
11  password: v.string('password is required'),
12});
13
14const App = () => {
15  const { register, handleSubmit } = useForm({
16    resolver: valibotResolver(schema),
17  });
18
19  return (
20    <form onSubmit={handleSubmit((d) => console.log(d))}>
21      <input {...register('username')} />
22      <input type="password" {...register('password')} />
23      <input type="submit" />
24    </form>
25  );
26};

TypeSchema

Universal adapter for schema validation, compatible with any validation library

1import { useForm } from 'react-hook-form';
2import { typeschemaResolver } from '@hookform/resolvers/typeschema';
3import * as z from 'zod';
4
5// Use your favorite validation library
6const schema = z.object({
7  username: z.string().min(1, { message: 'Required' }),
8  password: z.number().min(1, { message: 'Required' }),
9});
10
11const App = () => {
12  const { register, handleSubmit } = useForm({
13    resolver: typeschemaResolver(schema),
14  });
15
16  return (
17    <form onSubmit={handleSubmit((d) => console.log(d))}>
18      <input {...register('username')} />
19      <input type="password" {...register('password')} />
20      <input type="submit" />
21    </form>
22  );
23};

effect-ts

A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.

1import React from 'react';
2import { useForm } from 'react-hook-form';
3import { effectTsResolver } from '@hookform/resolvers/effect-ts';
4import { Schema } from 'effect';
5
6const schema = Schema.Struct({
7  username: Schema.String.pipe(
8    Schema.nonEmpty({ message: () => 'username required' }),
9  ),
10  password: Schema.String.pipe(
11    Schema.nonEmpty({ message: () => 'password required' }),
12  ),
13});
14
15type FormData = Schema.Schema.Type<typeof schema>;
16
17interface Props {
18  onSubmit: (data: FormData) => void;
19}
20
21function TestComponent({ onSubmit }: Props) {
22  const {
23    register,
24    handleSubmit,
25    formState: { errors },
26    // provide generic if TS has issues inferring types
27  } = useForm<FormData>({
28    resolver: effectTsResolver(schema),
29  });
30
31  return (
32    <form onSubmit={handleSubmit(onSubmit)}>
33      <input {...register('username')} />
34      {errors.username && <span role="alert">{errors.username.message}</span>}
35
36      <input {...register('password')} />
37      {errors.password && <span role="alert">{errors.password.message}</span>}
38
39      <button type="submit">submit</button>
40    </form>
41  );
42}

VineJS

VineJS is a form data validation library for Node.js

1import { useForm } from 'react-hook-form';
2import { vineResolver } from '@hookform/resolvers/vine';
3import vine from '@vinejs/vine';
4
5const schema = vine.compile(
6  vine.object({
7    username: vine.string().minLength(1),
8    password: vine.string().minLength(1),
9  }),
10);
11
12const App = () => {
13  const { register, handleSubmit } = useForm({
14    resolver: vineResolver(schema),
15  });
16
17  return (
18    <form onSubmit={handleSubmit((d) => console.log(d))}>
19      <input {...register('username')} />
20      {errors.username && <span role="alert">{errors.username.message}</span>}
21      <input {...register('password')} />
22      {errors.password && <span role="alert">{errors.password.message}</span>}
23      <button type="submit">submit</button>
24    </form>
25  );
26};

fluentvalidation-ts

A TypeScript-first library for building strongly-typed validation rules

1import { useForm } from 'react-hook-form';
2import { fluentValidationResolver } from '@hookform/resolvers/fluentvalidation-ts';
3import { Validator } from 'fluentvalidation-ts';
4
5class FormDataValidator extends Validator<FormData> {
6  constructor() {
7    super();
8
9    this.ruleFor('username')
10      .notEmpty()
11      .withMessage('username is a required field');
12    this.ruleFor('password')
13      .notEmpty()
14      .withMessage('password is a required field');
15  }
16}
17
18const App = () => {
19  const { register, handleSubmit } = useForm({
20    resolver: fluentValidationResolver(new FormDataValidator()),
21  });
22
23  return (
24    <form onSubmit={handleSubmit((d) => console.log(d))}>
25      <input {...register('username')} />
26      {errors.username && <span role="alert">{errors.username.message}</span>}
27      <input {...register('password')} />
28      {errors.password && <span role="alert">{errors.password.message}</span>}
29      <button type="submit">submit</button>
30    </form>
31  );
32};

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].