Performant, flexible and extensible forms with easy to use validation.
A simple component to render associated input's error message.
$ npm install @hookform/error-message
- Single Error Message
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 (
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="singleErrorInput"
ref={register({ required: 'This is required.' })}
/>
<ErrorMessage errors={errors} name="singleErrorInput" />
<ErrorMessage
errors={errors}
name="singleErrorInput"
render={({ message }) => <p>{message}</p>}
/>
<input name="name" ref={register({ required: true })} />
<ErrorMessage errors={errors} name="name" message="This is required" />
<input type="submit" />
</form>
);
}- Multiple Error Messages
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 (
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="multipleErrorInput"
ref={register({
required: 'This is required.',
pattern: {
value: /d+/,
message: 'This input is number only.',
},
maxLength: {
value: 10,
message: 'This input exceed maxLength.',
},
})}
/>
<ErrorMessage
errors={errors}
name="multipleErrorInput"
render={({ messages }) =>
messages &&
Object.entries(messages).map(([type, message]) => (
<p key={type}>{message}</p>
))
}
/>
<input type="submit" />
</form>
);
}| 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. |
Thank goes to all our backers! [Become a backer].
Thanks goes to these wonderful people. [Become a contributor].
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent