# ErrorMessage · HeroUI

> A low-level error message component for displaying errors

- Page: https://jiguang132.com/systems/heroui/docs/components/error-message
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
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.


> Example `error-message-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/error-message


### 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`](/systems/heroui/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](/systems/heroui/docs/components/field-error) and the [Form guide](/systems/heroui/docs/components/form) for examples and best practices.

## API Reference

### ErrorMessage Props

| 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

## Styling

### Passing Tailwind CSS classes

```tsx
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](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

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

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
- `.error-message` - Base error message styles with danger color and text truncation

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt