Chapter 33: ErrorMessage

Core Idea

ErrorMessage (separate @hookform/error-message package) is a small component that renders a field's error message(s) without you writing errors.field?.message conditionals by hand.

Key Concepts

• Installation: npm install @hookform/error-message — not bundled in core.
• name (required) / errors: errors is optional when inside FormProvider.
• message: an inline fallback message.
• as: wrapper element/component/tag (as="span", as={<Text />}).
• render: render-prop receiving { message, messages? }; messages (plural) is only populated when criteriaMode: "all" is set on the form, letting one field show every failed rule at once instead of just the first.

Code Examples

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

• What it demonstrates: default rendering vs. a custom render prop for a single error.

// useForm({ criteriaMode: "all" }) + register with multiple rule messages
<ErrorMessage
  errors={errors}
  name="multipleErrorInput"
  render={({ messages }) =>
    messages && Object.entries(messages).map(([type, message]) => <p key={type}>{message}</p>)
  }
/>

• What it demonstrates: showing every failed validation rule for one field simultaneously, which requires criteriaMode: "all".

Anti-patterns

• Expecting messages (plural) to populate without criteriaMode: "all": only message (singular, first error) is available otherwise.

Key Takeaways

1. ErrorMessage is sugar over errors.<name>?.message — use it when you don't need custom conditional logic.
2. Multiple simultaneous messages per field require both criteriaMode: "all" on the form and the messages (plural) render-prop argument.

Connects To

• useform-formstate / useformstate: the source of the errors object this component reads.
• useform-seterror: types + criteriaMode: "all" is the manual-error equivalent of what this component renders declaratively.