Hermes Desk

</a>

</p>

</div>

<p align="center">Performant, flexible and extensible forms with easy to use validation.</p>

![npm downloads](https://www.npmjs.com/package/@hookform/resolvers)

![npm](https://www.npmjs.com/package/@hookform/resolvers)

![npm](https://bundlephobia.com/result?p=@hookform/resolvers)

</div>

Install

npm install @hookform/resolvers

API

```

type Options = {

mode: 'async' | 'sync',

raw?: boolean

}

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

```

| --------------- | -------- | -------- | --------------------------------------------- |

Quickstart

Yup

Dead simple Object schema validation.

![npm](https://bundlephobia.com/result?p=yup)

```typescript jsx

import { useForm } from 'react-hook-form';

import { yupResolver } from '@hookform/resolvers/yup';

import * as yup from 'yup';

const schema = yup

.object()

.shape({

age: yup.number().required(),

})

.required();

const App = () => {

const { register, handleSubmit } = useForm({

resolver: yupResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

Zod

TypeScript-first schema validation with static type inference

![npm](https://bundlephobia.com/result?p=zod)

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

```tsx

import { useForm } from 'react-hook-form';

import { zodResolver } from '@hookform/resolvers/zod';

import * as z from 'zod';

const schema = z.object({

age: z.number().min(10),

});

const App = () => {

const {

handleSubmit,

formState: { errors },

} = useForm({

resolver: zodResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

{errors.name?.message && <p>{errors.name?.message}</p>}

{errors.age?.message && <p>{errors.age?.message}</p>}

</form>

);

};

```

Superstruct

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

![npm](https://bundlephobia.com/result?p=superstruct)

```typescript jsx

import { useForm } from 'react-hook-form';

import { superstructResolver } from '@hookform/resolvers/superstruct';

import { object, string, number } from 'superstruct';

const schema = object({

age: number(),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: superstructResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

Joi

The most powerful data validation library for JS.

![npm](https://bundlephobia.com/result?p=joi)

```typescript jsx

import { useForm } from 'react-hook-form';

import { joiResolver } from '@hookform/resolvers/joi';

import Joi from 'joi';

const schema = Joi.object({

age: Joi.number().required(),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: joiResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

Vest

Vest 🦺 Declarative Validation Testing.

![npm](https://bundlephobia.com/result?p=vest)

```typescript jsx

import { useForm } from 'react-hook-form';

import { vestResolver } from '@hookform/resolvers/vest';

import { create, test, enforce } from 'vest';

const validationSuite = create((data = {}) => {

test('username', 'Username is required', () => {

enforce(data.username).isNotEmpty();

});

test('password', 'Password is required', () => {

enforce(data.password).isNotEmpty();

});

const App = () => {

const { register, handleSubmit, errors } = useForm({

resolver: vestResolver(validationSuite),

});

return (

<form onSubmit={handleSubmit((data) => console.log(data))}>

</form>

);

};

```

Class Validator

Decorator-based property validation for classes.

![npm](https://bundlephobia.com/result?p=class-validator)

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

```

"strictPropertyInitialization": false,

"experimentalDecorators": true

```

```tsx

import { useForm } from 'react-hook-form';

import { classValidatorResolver } from '@hookform/resolvers/class-validator';

import { Length, Min, IsEmail } from 'class-validator';

class User {

@Length(2, 30)

username: string;

@IsEmail()

email: string;

}

const resolver = classValidatorResolver(User);

const App = () => {

const {

handleSubmit,

formState: { errors },

} = useForm<User>({ resolver });

return (

<form onSubmit={handleSubmit((data) => console.log(data))}>

{errors.username && <span>{errors.username.message}</span>}

{errors.email && <span>{errors.email.message}</span>}

</form>

);

};

```

io-ts

Validate your data with powerful decoders.

![npm](https://bundlephobia.com/result?p=io-ts)

```typescript jsx

import React from 'react';

import { useForm } from 'react-hook-form';

import { ioTsResolver } from '@hookform/resolvers/io-ts';

import t from 'io-ts';

// you don't have to use io-ts-types, but it's very useful

import tt from 'io-ts-types';

const schema = t.type({

username: t.string,

age: tt.NumberFromString,

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: ioTsResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

export default App;

```

Nope

A small, simple, and fast JS validator

![npm](https://bundlephobia.com/result?p=nope-validator)

```typescript jsx

import { useForm } from 'react-hook-form';

import { nopeResolver } from '@hookform/resolvers/nope';

import Nope from 'nope-validator';

const schema = Nope.object().shape({

age: Nope.number().required(),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: nopeResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

computed-types

TypeScript-first schema validation with static type inference

![npm](https://bundlephobia.com/result?p=computed-types)

```tsx

import { useForm } from 'react-hook-form';

import { computedTypesResolver } from '@hookform/resolvers/computed-types';

import Schema, { number, string } from 'computed-types';

const schema = Schema({

username: string.min(1).error('username field is required'),

age: number,

});

const App = () => {

const {

handleSubmit,

formState: { errors },

} = useForm({

resolver: computedTypesResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

{errors.name?.message && <p>{errors.name?.message}</p>}

{errors.age?.message && <p>{errors.age?.message}</p>}

</form>

);

};

```

typanion

Static and runtime type assertion library with no dependencies

![npm](https://bundlephobia.com/result?p=typanion)

```tsx

import { useForm } from 'react-hook-form';

import { typanionResolver } from '@hookform/resolvers/typanion';

import * as t from 'typanion';

const isUser = t.isObject({

username: t.applyCascade(t.isString(), [t.hasMinLength(1)]),

age: t.applyCascade(t.isNumber(), [

t.isInteger(),

t.isInInclusiveRange(1, 100),

]),

});

const App = () => {

const {

handleSubmit,

formState: { errors },

} = useForm({

resolver: typanionResolver(isUser),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

{errors.name?.message && <p>{errors.name?.message}</p>}

{errors.age?.message && <p>{errors.age?.message}</p>}

</form>

);

};

```

Ajv

The fastest JSON validator for Node.js and browser

![npm](https://bundlephobia.com/result?p=ajv)

```tsx

import { useForm } from 'react-hook-form';

import { ajvResolver } from '@hookform/resolvers/ajv';

// must use minLength: 1 to implement required field

const schema = {

type: 'object',

properties: {

username: {

type: 'string',

minLength: 1,

errorMessage: { minLength: 'username field is required' },

password: {

type: 'string',

minLength: 1,

errorMessage: { minLength: 'password field is required' },

required: ['username', 'password'],

additionalProperties: false,

};

const App = () => {

const {

handleSubmit,

formState: { errors },

} = useForm({

resolver: ajvResolver(schema),

});

return (

<form onSubmit={handleSubmit((data) => console.log(data))}>

{errors.username && <span>{errors.username.message}</span>}

{errors.password && <span>{errors.password.message}</span>}

<button type="submit">submit</button>

</form>

);

};

```

TypeBox

JSON Schema Type Builder with Static Type Resolution for TypeScript

![npm](https://bundlephobia.com/result?p=@sinclair/typebox)

#### With ValueCheck

```typescript jsx

import { useForm } from 'react-hook-form';

import { typeboxResolver } from '@hookform/resolvers/typebox';

import { Type } from '@sinclair/typebox';

const schema = Type.Object({

username: Type.String({ minLength: 1 }),

password: Type.String({ minLength: 1 }),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: typeboxResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

#### With TypeCompiler

A high-performance JIT of TypeBox, read more

```typescript jsx

import { useForm } from 'react-hook-form';

import { typeboxResolver } from '@hookform/resolvers/typebox';

import { Type } from '@sinclair/typebox';

import { TypeCompiler } from '@sinclair/typebox/compiler';

const schema = Type.Object({

username: Type.String({ minLength: 1 }),

password: Type.String({ minLength: 1 }),

});

const typecheck = TypeCompiler.Compile(schema);

const App = () => {

const { register, handleSubmit } = useForm({

resolver: typeboxResolver(typecheck),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

ArkType

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

![npm](https://bundlephobia.com/result?p=arktype)

```typescript jsx

import { useForm } from 'react-hook-form';

import { arktypeResolver } from '@hookform/resolvers/arktype';

import { type } from 'arktype';

const schema = type({

username: 'string>1',

password: 'string>1',

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: arktypeResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

Valibot

The modular and type safe schema library for validating structural data

![npm](https://bundlephobia.com/result?p=valibot)

```typescript jsx

import { useForm } from 'react-hook-form';

import { valibotResolver } from '@hookform/resolvers/valibot';

import * as v from 'valibot';

const schema = v.object({

username: v.pipe(

v.string('username is required'),

v.minLength(3, 'Needs to be at least 3 characters'),

v.endsWith('cool', 'Needs to end with cool'),

password: v.string('password is required'),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: valibotResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

TypeSchema

Universal adapter for schema validation, compatible with any validation library

![npm](https://bundlephobia.com/result?p=@typeschema/main)

```typescript jsx

import { useForm } from 'react-hook-form';

import { typeschemaResolver } from '@hookform/resolvers/typeschema';

import * as z from 'zod';

// Use your favorite validation library

const schema = z.object({

username: z.string().min(1, { message: 'Required' }),

password: z.number().min(1, { message: 'Required' }),

});

const App = () => {

const { register, handleSubmit } = useForm({

resolver: typeschemaResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

</form>

);

};

```

effect-ts

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

![npm](https://bundlephobia.com/result?p=effect)

```typescript jsx

import React from 'react';

import { useForm } from 'react-hook-form';

import { effectTsResolver } from '@hookform/resolvers/effect-ts';

import { Schema } from 'effect';

const schema = Schema.Struct({

username: Schema.String.pipe(

Schema.nonEmpty({ message: () => 'username required' }),

password: Schema.String.pipe(

Schema.nonEmpty({ message: () => 'password required' }),

});

type FormData = typeof schema.Type;

interface Props {

onSubmit: (data: FormData) => void;

}

function TestComponent({ onSubmit }: Props) {

const {

handleSubmit,

formState: { errors },

// provide generic if TS has issues inferring types

} = useForm<FormData>({

resolver: effectTsResolver(schema),

});

return (

{errors.username && <span role="alert">{errors.username.message}</span>}

{errors.password && <span role="alert">{errors.password.message}</span>}

<button type="submit">submit</button>

</form>

);

}

```

VineJS

VineJS is a form data validation library for Node.js

![npm](https://bundlephobia.com/result?p=@vinejs/vine)

```typescript jsx

import { useForm } from 'react-hook-form';

import { vineResolver } from '@hookform/resolvers/vine';

import vine from '@vinejs/vine';

const schema = vine.compile(

vine.object({

username: vine.string().minLength(1),

password: vine.string().minLength(1),

}),

);

const App = () => {

const { register, handleSubmit } = useForm({

resolver: vineResolver(schema),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

{errors.username && <span role="alert">{errors.username.message}</span>}

{errors.password && <span role="alert">{errors.password.message}</span>}

<button type="submit">submit</button>

</form>

);

};

```

fluentvalidation-ts

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

![npm](https://bundlephobia.com/result?p=@vinejs/vine)

```typescript jsx

import { useForm } from 'react-hook-form';

import { fluentValidationResolver } from '@hookform/resolvers/fluentvalidation-ts';

import { Validator } from 'fluentvalidation-ts';

class FormDataValidator extends Validator<FormData> {

constructor() {

super();

this.ruleFor('username')

.notEmpty()

.withMessage('username is a required field');

this.ruleFor('password')

.notEmpty()

.withMessage('password is a required field');

}

const App = () => {

const { register, handleSubmit } = useForm({

resolver: fluentValidationResolver(new FormDataValidator()),

});

return (

<form onSubmit={handleSubmit((d) => console.log(d))}>

{errors.username && <span role="alert">{errors.username.message}</span>}

{errors.password && <span role="alert">{errors.password.message}</span>}

<button type="submit">submit</button>

</form>

);

};

```

Backers

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

</a>

Contributors

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

</a>

README.md

Install

Links

Supported resolvers

API

Quickstart

Yup

Zod

Superstruct

Joi

Vest

Class Validator

io-ts

Nope

computed-types

typanion

Ajv

TypeBox

ArkType

Valibot

TypeSchema

effect-ts

VineJS

fluentvalidation-ts

Backers

Contributors

README.​md

Install

Links

Supported resolvers

API

Quickstart

Backers

Contributors

README.md