ErrorMessage: Component
A simple component to render associated input's error message.
npm install @hookform/error-message
Props
Name | Type | Required | Description |
---|---|---|---|
name | string | ✓ | Name of the field. |
errors | object | errors object from React Hook Form. Optional if you are using FormProvider . | |
message | string | React.ReactElement | Inline error message. | |
as | React.ElementType | string | Wrapper component or HTML tag. For example: as="span" or as={<Text />} | |
render | ({ message: string | React.ReactElement, messages?: Object}) => any | This is a render prop for rendering error message or messages. Note: you need to set |
Examples
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 {...register("singleErrorInput", { required: "This is required." })} /> <ErrorMessage errors={errors} name="singleErrorInput" /> <ErrorMessage errors={errors} name="singleErrorInput" render={({ message }) => <p>{message}</p>} /> <input type="submit" /> </form> ); }
import React from "react"; import { useForm } from "react-hook-form"; import { ErrorMessage } from '@hookform/error-message'; interface FormInputs { singleErrorInput: string } export default function App() { const { register, formState: { errors }, handleSubmit } = useForm<FormInputs>(); const onSubmit = (data: FormInputs) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("singleErrorInput", { required: "This is required." })} /> <ErrorMessage errors={errors} name="singleErrorInput" /> <ErrorMessage errors={errors} name="singleErrorInput" render={({ message }) => <p>{message}</p>} /> <input type="submit" /> </form> ); }
Thank you for your support
If you find React Hook Form to be useful in your project, please consider to star and support it.