ErrorMessageNew

Import

import { ErrorMessage } from '@heroui/react';

Usage

ErrorMessage is a low-level component built on React Aria's Text component with an errorMessage slot. It's designed for displaying error messages in non-form components such as TagGroup, Calendar, and other collection-based components.

"use client";

import type {Key} from "@heroui/react";

import {Description, ErrorMessage, Label, Tag, TagGroup} from "@heroui/react";

Anatomy

import { TagGroup, Tag, Label, Description, ErrorMessage } from '@heroui/react';

<TagGroup>
  <Label />
  <TagGroup.List>
    <Tag />
  </TagGroup.List>
  <Description />
  <ErrorMessage />
</TagGroup>

When to Use

ErrorMessage is not tied to forms. It's a generic error display component for non-form contexts.

• Recommended for non-form components (e.g., TagGroup, Calendar, collection components)
• For form fields, we recommend using FieldError instead, which provides form-specific validation features and automatic error handling, following standardized form validation patterns.

ErrorMessage vs FieldError

For form validation, we recommend using FieldError as it follows standardized form validation patterns and provides form-specific features. See the FieldError documentation and the Form guide for examples and best practices.

API Reference

ErrorMessage Props

Note: ErrorMessage is built on React Aria's Text component with slot="errorMessage". It can be targeted using the [slot=errorMessage] CSS selector.

Accessibility

The ErrorMessage component enhances accessibility by:

• Using semantic HTML that screen readers can identify
• Providing the slot="errorMessage" attribute for React Aria integration
• Supporting proper text contrast ratios for error states
• Following WAI-ARIA best practices for error messaging

Styling

Passing Tailwind CSS classes

import { ErrorMessage } from '@heroui/react';

function CustomErrorMessage() {
  return (
    <ErrorMessage className="font-bold text-sm">
      Custom styled error message
    </ErrorMessage>
  );
}

Customizing the component classes

To customize the ErrorMessage component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .error-message {
    @apply text-red-600 text-sm font-medium;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ErrorMessage component uses these CSS classes (View source styles):

Base Classes

• .error-message - Base error message styles with danger color and text truncation

Slot Classes

• [slot="errorMessage"] - ErrorMessage slot styles for React Aria integration