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

Goal

A simple component to render associated input's error message.

Install

$ npm install @hookform/error-message

Quickstart

• Single Error Message

1import React from 'react';
2import { useForm } from 'react-hook-form';
3import { ErrorMessage } from '@hookform/error-message';
4
5export default function App() {
6  const { register, formState: { errors }, handleSubmit } = useForm();
7  const onSubmit = (data) => console.log(data);
8
9  return (
10    <form onSubmit={handleSubmit(onSubmit)}>
11      <input
12        name="singleErrorInput"
13        ref={register({ required: 'This is required.' })}
14      />
15      <ErrorMessage errors={errors} name="singleErrorInput" />
16
17      <ErrorMessage
18        errors={errors}
19        name="singleErrorInput"
20        render={({ message }) => <p>{message}</p>}
21      />
22
23      <input name="name" ref={register({ required: true })} />
24      <ErrorMessage errors={errors} name="name" message="This is required" />
25
26      <input type="submit" />
27    </form>
28  );
29}

---

• Multiple Error Messages

1import React from 'react';
2import { useForm } from 'react-hook-form';
3import { ErrorMessage } from '@hookform/error-message';
4
5export default function App() {
6  const { register, formState: { errors }, handleSubmit } = useForm({
7    criteriaMode: 'all',
8  });
9  const onSubmit = (data) => console.log(data);
10
11  return (
12    <form onSubmit={handleSubmit(onSubmit)}>
13      <input
14        name="multipleErrorInput"
15        ref={register({
16          required: 'This is required.',
17          pattern: {
18            value: /d+/,
19            message: 'This input is number only.',
20          },
21          maxLength: {
22            value: 10,
23            message: 'This input exceed maxLength.',
24          },
25        })}
26      />
27      <ErrorMessage
28        errors={errors}
29        name="multipleErrorInput"
30        render={({ messages }) =>
31          messages &&
32          Object.entries(messages).map(([type, message]) => (
33            <p key={type}>{message}</p>
34          ))
35        }
36      />
37
38      <input type="submit" />
39    </form>
40  );
41}

API

Prop	Type	Required	Description
name	string	✓	Associated field name.
errors	object		errors object from React Hook Form. It's optional if you are using FormProvider.
message	string | React.ReactElement		inline error message.
as	string | React.ReactElement | React.ComponentType		Wrapper component or HTML tag. eg: as="p", as={<p />} or as={CustomComponent}. This prop is incompatible with prop render and will take precedence over it.
render	Function		This is a render prop for rendering error message or messages. Note: you need to set criteriaMode to all for using messages.

Backers

Thank goes to all our backers! [Become a backer].

Contributors

Thanks goes to these wonderful people. [Become a contributor].