@hookform/error-message

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

`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 (


`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 (


| 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 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].