用法

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

用户名用户名至少需要 3 个字符

FieldError 组件展示表单字段的校验错误消息。当父字段标记为无效时自动显示，并提供平滑的透明度过渡。

示例

基础校验

export function Basic() {
  const [value, setValue] = useState("");
  const isInvalid = value.length > 0 && value.length < 3;

  return (
    <TextField className="w-64" isInvalid={isInvalid}>
      <Label htmlFor="username">Username</Label>
      <Input
        id="username"
        placeholder="Enter username"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <FieldError>Username must be at least 3 characters</FieldError>
    </TextField>
  );
}

动态错误信息

<TextField isInvalid={errors.length > 0}>
  <Label>Password</Label>
  <Input type="password" />
  <FieldError>
    {(validation) => validation.validationErrors.join(', ')}
  </FieldError>
</TextField>

自定义校验逻辑

function EmailField() {
  const [email, setEmail] = useState('');
  const isInvalid = email.length > 0 && !email.includes('@');

  return (
    <TextField isInvalid={isInvalid}>
      <Label>Email</Label>
      <Input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <FieldError>Email must include @ symbol</FieldError>
    </TextField>
  );
}

多条错误信息

<TextField isInvalid={hasErrors}>
  <Label>Username</Label>
  <Input />
  <FieldError>
    {errors.map((error, i) => (
      <div key={i}>{error}</div>
    ))}
  </FieldError>
</TextField>

自定义样式

Tailwind CSS

用户名用户名至少需要 3 个字符

全局 CSS

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

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

样式参考

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

CSS 类

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

基础类

.field-error - 基础错误样式，danger 色
仅在存在 data-visible 属性时显示
长消息以省略号截断

API 参考

FieldError

Prop	类型	默认值	描述
`className`	`string`	-	附加 CSS 类
`children`	`ReactNode \| ((validation: ValidationResult) => ReactNode)`	-	错误消息内容或 render 函数

无障碍

FieldError 组件通过以下方式确保无障碍性：

使用适当的 ARIA 属性播报错误
语义化 HTML 支持屏幕阅读器
提供视觉与程序化错误指示
根据校验状态自动管理可见性

FieldError 字段错误

用法

示例