ErrorMessage 错误消息

用于展示错误的底层错误消息组件

用法

1import { ErrorMessage } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.3import { Description, ErrorMessage, Label, Tag, TagGroup } from "@lenso/ui";4import type { TagGroupRootProps } from "@lenso/ui";5import { useId, useState } from "react";6
7const categories = ["News", "Travel", "Gaming", "Shopping"];8export function ErrorMessageBasic() {9  const [selected, setSelected] = useState<TagGroupRootProps["selectedKeys"]>(new Set());10  const labelId = useId();11  const descriptionId = useId();12  const errorId = useId();13  const invalid = !selected || selected.size === 0;14  return (15    <TagGroup16      selectedKeys={selected}17      selectionMode="multiple"18      onSelectionChange={setSelected}19      aria-labelledby={labelId}20      aria-describedby={`${descriptionId}${invalid ? ` ${errorId}` : ""}`}21      aria-invalid={invalid}22    >23      <Label id={labelId} nativeLabel={false}>24        Required Categories25      </Label>26      <TagGroup.List>27        {categories.map((category) => (28          <Tag key={category} itemKey={category.toLowerCase()} textValue={category}>29            {category}30          </Tag>31        ))}32      </TagGroup.List>33      <Description id={descriptionId}>Select at least one category</Description>34      <ErrorMessage id={errorId}>35        {invalid && <>Please select at least one category</>}36      </ErrorMessage>37    </TagGroup>38  );39}

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

ErrorMessage 是基于 React Aria Text 组件、errorMessage slot 的底层组件，用于在 非表单组件（如 TagGroup、Calendar 及其他集合类组件）中展示错误消息。

组件结构

1import { TagGroup, Tag, Label, Description, ErrorMessage } from '@lenso/ui';2
3<TagGroup>4  <Label />5  <TagGroup.List>6    <Tag />7  </TagGroup.List>8  <Description />9  <ErrorMessage />10</TagGroup>

何时使用

ErrorMessage 不绑定表单，是用于非表单上下文的通用错误展示组件。

推荐用于 非表单组件（如 TagGroup、Calendar、集合类组件）
表单字段 建议使用 FieldError，它提供表单专用校验特性与自动错误处理，遵循标准化表单校验模式。

ErrorMessage 与 FieldError

组件	使用场景	表单集成	示例组件
`ErrorMessage`	非表单组件	否	`TagGroup`、`Calendar`
`FieldError`	表单字段（推荐）	是	`TextField`、`NumberField`、`Select`

表单校验建议使用 FieldError，它遵循标准化表单校验模式并提供表单专用特性。参见 FieldError 文档与 Form 指南。

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.3import { Description, ErrorMessage, Label, Tag, TagGroup } from "@lenso/ui";4import type { TagGroupRootProps } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { useId, useState } from "react";7
8const styles = stylex.create({9  group: { width: "100%", maxWidth: 320, gap: 6 },10  error: { fontWeight: 500, color: "var(--danger)" },11});12
13export function CustomStyles() {14  const [selected, setSelected] = useState<TagGroupRootProps["selectedKeys"]>(new Set());15  const labelId = useId();16  const descriptionId = useId();17  const errorId = useId();18  const invalid = !selected || selected.size === 0;19  return (20    <TagGroup21      xstyle={styles.group}22      selectedKeys={selected}23      selectionMode="multiple"24      onSelectionChange={setSelected}25      aria-labelledby={labelId}26      aria-describedby={`${descriptionId}${invalid ? ` ${errorId}` : ""}`}27      aria-invalid={invalid}28    >29      <Label id={labelId} nativeLabel={false}>30        Topics31      </Label>32      <TagGroup.List>33        <Tag itemKey="api" textValue="API">34          API35        </Tag>36        <Tag itemKey="design" textValue="Design">37          Design38        </Tag>39        <Tag itemKey="docs" textValue="Docs">40          Docs41        </Tag>42      </TagGroup.List>43      <Description id={descriptionId}>Pick at least one topic</Description>44      <ErrorMessage id={errorId} xstyle={styles.error}>45        {invalid && <>Choose at least one topic</>}46      </ErrorMessage>47    </TagGroup>48  );49}

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

全局 CSS

可使用 @layer components 指令自定义 ErrorMessage 组件类。了解更多。

1@layer components {2  .error-message {3    @apply text-sm font-medium text-danger;4  }5}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

ErrorMessage 组件使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.error-message - 基础错误消息样式，danger 色与文本截断

插槽类 [!toc]

[slot="errorMessage"] - 用于 React Aria 集成的 ErrorMessage slot 样式

API 参考

ErrorMessage

Prop	类型	默认值	描述
`className`	`string`	-	附加 CSS 类
`children`	`ReactNode`	-	错误消息内容

说明

ErrorMessage 基于 React Aria 的 Text 组件，slot="errorMessage"。可通过 [slot=errorMessage] CSS 选择器定位。

无障碍

ErrorMessage 组件通过以下方式增强无障碍性：

使用屏幕阅读器可识别的语义化 HTML
提供 slot="errorMessage" 属性以集成 React Aria
错误状态支持适当的文本对比度
遵循 WAI-ARIA 错误消息最佳实践