Skip to content
Lenso UI

ErrorMessage

A low-level error message component for displaying errors

Usage

import { ErrorMessage } from '@lenso/ui';
"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { Description, ErrorMessage, Label, Tag, TagGroup } from "@lenso/ui";import type { TagGroupRootProps } from "@lenso/ui";import { useId, useState } from "react";
const categories = ["News", "Travel", "Gaming", "Shopping"];export function ErrorMessageBasic() {  const [selected, setSelected] = useState<TagGroupRootProps["selectedKeys"]>(new Set());  const labelId = useId();  const descriptionId = useId();  const errorId = useId();  const invalid = !selected || selected.size === 0;  return (    <TagGroup      selectedKeys={selected}      selectionMode="multiple"      onSelectionChange={setSelected}      aria-labelledby={labelId}      aria-describedby={`${descriptionId}${invalid ? ` ${errorId}` : ""}`}      aria-invalid={invalid}    >      <Label id={labelId} nativeLabel={false}>        Required Categories      </Label>      <TagGroup.List>        {categories.map((category) => (          <Tag key={category} itemKey={category.toLowerCase()} textValue={category}>            {category}          </Tag>        ))}      </TagGroup.List>      <Description id={descriptionId}>Select at least one category</Description>      <ErrorMessage id={errorId}>        {invalid && <>Please select at least one category</>}      </ErrorMessage>    </TagGroup>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

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 '@lenso/ui';
<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

ComponentUse CaseForm IntegrationExample Components
ErrorMessageNon-form componentsNoTagGroup, Calendar
FieldErrorForm fields (recommended)YesTextField, 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 and the Form guide for examples and best practices.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { Description, ErrorMessage, Label, Tag, TagGroup } from "@lenso/ui";import type { TagGroupRootProps } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId, useState } from "react";
const styles = stylex.create({  group: { width: "100%", maxWidth: 320, gap: 6 },  error: { fontWeight: 500, color: "var(--danger)" },});
export function CustomStyles() {  const [selected, setSelected] = useState<TagGroupRootProps["selectedKeys"]>(new Set());  const labelId = useId();  const descriptionId = useId();  const errorId = useId();  const invalid = !selected || selected.size === 0;  return (    <TagGroup      xstyle={styles.group}      selectedKeys={selected}      selectionMode="multiple"      onSelectionChange={setSelected}      aria-labelledby={labelId}      aria-describedby={`${descriptionId}${invalid ? ` ${errorId}` : ""}`}      aria-invalid={invalid}    >      <Label id={labelId} nativeLabel={false}>        Topics      </Label>      <TagGroup.List>        <Tag itemKey="api" textValue="API">          API        </Tag>        <Tag itemKey="design" textValue="Design">          Design        </Tag>        <Tag itemKey="docs" textValue="Docs">          Docs        </Tag>      </TagGroup.List>      <Description id={descriptionId}>Pick at least one topic</Description>      <ErrorMessage id={errorId} xstyle={styles.error}>        {invalid && <>Choose at least one topic</>}      </ErrorMessage>    </TagGroup>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

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 [!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

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-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
TagGroup

A focusable list of tags with support for keyboard navigation, selection, and removal