---
title: ErrorMessage
description: A low-level error message component for displaying errors
links:
  rac: TagGroup
  source: error-message/error-message.tsx
  styles: error-message.css
---

## Usage

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

<ComponentPreview
  name="error-message-basic"
/>

`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

```tsx
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`](/docs/components/field-error) instead, which provides form-specific validation features and automatic error handling, following standardized form validation patterns.

## ErrorMessage vs FieldError

| Component | Use Case | Form Integration | Example Components |
|-----------|----------|------------------|---------------------|
| `ErrorMessage` | Non-form components | No | `TagGroup`, `Calendar` |
| `FieldError` | Form fields (recommended) | Yes | `TextField`, `NumberField`, `Select` |

For form validation, we recommend using `FieldError` as it follows standardized form validation patterns and provides form-specific features. See the [FieldError documentation](/docs/components/field-error) and the [Form guide](/docs/components/form) for examples and best practices.

## Customization

### Tailwind CSS

<ComponentPreview name="error-message-custom-styles" />

### Global CSS

To customize the ErrorMessage component classes, you can use the `@layer components` directive. [Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

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

## Styling Reference

HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/error-message.css)):

#### Base Classes [!toc]

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

#### Slot Classes [!toc]

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

## API Reference

### ErrorMessage

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | The error message content |

## 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

<RelatedComponents component="errormessage" />
