ErrorMessage

An error message displays validation errors for a form field.

View source View on npm Report an issue

AI Tip Want to skip the docs? Use the MCP Server

Usage

No icon

An error message can hide its default icon.

Multiple errors

An error message can display multiple validation errors created by a form field.

Props

hideIcon?

Whether or not to hide the error message icon.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

Defaults to 'react-aria-FieldError'.

children?

The children of the component. A function may be provided to alter the children based on component state.

render?

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.

Requirements:

You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
Only a single root DOM element can be rendered (no fragments).
You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

elementType?

The HTML element type to render. Defaults to 'span'. Set to 'div' when using block-level children (e.g. <ul>) to avoid invalid HTML.

Defaults to 'span'.

size?

The Typography Type Scale to use.