ErrorMessage

Usage

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

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.

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.

Customization

Tailwind CSS

Global CSS

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

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

Styling Reference

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

API Reference

ErrorMessage

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

Related Components