ErrorMessage

</> `ErrorMessage:` Component Since v7.88.0

A simple component to render associated input's error message. Reads from the control prop when supplied, otherwise from the nearest FormProvider.

Props

Name	Type	Required	Description
`name`	string	✓	Name of the field, or a global error path (`root` or `root.*`).
`control`	Control		`control` object provided by `useForm`. Optional if you are using `FormProvider`.
`as`	React.ElementType		Wrapper component or HTML tag. For example: `as="span"` or `as={Text}`
`render`	`({ message: string, messages?: Object}) => React.ReactNode`		This is a render prop for rendering error message or messages. Note: you need to set `criteriaMode` to 'all' for using `messages`.

Examples:

Single Error Message

CodeSandbox ^TS

import { useForm, ErrorMessage } from "react-hook-form"

interface FormInputs {
  singleErrorInput: string
}

export default function App() {
  const { register, control, handleSubmit } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("singleErrorInput", { required: "This is required." })}
      />
      <ErrorMessage control={control} name="singleErrorInput" />

      <ErrorMessage
        control={control}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />

      <input type="submit" />
    </form>
  )
}

Multiple Error Messages

CodeSandbox ^TS

import { useForm, ErrorMessage } from "react-hook-form"

interface FormInputs {
  multipleErrorInput: string
}

export default function App() {
  const { register, control, handleSubmit } = useForm<FormInputs>({
    criteriaMode: "all",
  })
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("multipleErrorInput", {
          required: "This is required.",
          pattern: {
            value: /\d+/,
            message: "This input is number only.",
          },
          maxLength: {
            value: 10,
            message: "This input exceed maxLength.",
          },
        })}
      />
      <ErrorMessage
        control={control}
        name="multipleErrorInput"
        render={({ messages }) =>
          messages &&
          Object.entries(messages).map(([type, message]) => (
            <p key={type}>{message}</p>
          ))
        }
      />

      <input type="submit" />
    </form>
  )
}

With FormProvider

import { useForm, FormProvider, ErrorMessage } from "react-hook-form"

function Field() {
  return <ErrorMessage name="singleErrorInput" />
}

export default function App() {
  const methods = useForm()

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit((data) => console.log(data))}>
        <input
          {...methods.register("singleErrorInput", {
            required: "This is required.",
          })}
        />
        <Field />

        <input type="submit" />
      </form>
    </FormProvider>
  )
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.

</> ErrorMessage: Component Since v7.88.0

Props

Examples:

Thank you for your support

</> `ErrorMessage:` Component Since v7.88.0