Performant, flexible and extensible forms with easy to use validation.
[](https://www.npmjs.com/package/@hookform/error-message)
[](https://www.npmjs.com/package/@hookform/error-message)
[](https://bundlephobia.com/result?p=@hookform/error-message)
## Goal
A simple component to render associated input's error message.
## Install
```
$ npm install @hookform/error-message
```
## Quickstart
- Single Error Message
```jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
);
}
```
---
- Multiple Error Messages
```jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm({
criteriaMode: 'all',
});
const onSubmit = (data) => console.log(data);
return (
);
}
```
## 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={}` or `as={CustomComponent}`. This prop is incompatible with prop `render` and will take precedence over it. |
| `render` | `Function` | | This is a [render prop](https://reactjs.org/docs/render-props.html) 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](https://opencollective.com/react-hook-form#backer)].
## Contributors
Thanks goes to these wonderful people. [[Become a contributor](CONTRIBUTING.md)].
