FieldError 字段错误
展示表单字段校验错误消息
用法
import { FieldError } from '@lenso/ui';此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6, Apache-2.0.import { FieldError, Input, Label, TextField } from "@lenso/ui";import { useState } from "react";import { demoStyles } from "../../demo.stylex";
export function Basic() { const [value, setValue] = useState("jr"); const invalid = value.length > 0 && value.length < 3; return ( <TextField xstyle={demoStyles.field} invalid={invalid}> <Label>Username</Label> <Input placeholder="Enter username" value={value} onValueChange={setValue} /> {invalid && <FieldError match>Username must be at least 3 characters</FieldError>} </TextField> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
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
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { FieldError, Input, Label, TextField } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId, useState } from "react";
const styles = stylex.create({ field: { width: 256, maxWidth: "100%" }, input: { backgroundColor: "var(--field-background)", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", }, error: { fontWeight: 500 },});
export function CustomStyles() { const [value, setValue] = useState("jr"); const id = useId(); const invalid = value.length > 0 && value.length < 3; return ( <TextField xstyle={styles.field} invalid={invalid}> <Label htmlFor={id}>Handle</Label> <Input xstyle={styles.input} id={id} placeholder="min. 3 characters" value={value} onValueChange={setValue} /> {invalid && ( <FieldError match xstyle={styles.error}> Handle must be at least 3 characters </FieldError> )} </TextField> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
全局 CSS
可使用 @layer components 指令自定义 FieldError 组件类。了解更多。
@layer components { .field-error { @apply font-medium text-danger; }}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
FieldError 组件使用以下 CSS 类（查看源码样式）：
基础类 [!toc]
.field-error- 基础错误样式，danger 色- 仅在存在
data-visible属性时显示 - 长消息以省略号截断
API 参考
FieldError
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加 CSS 类 |
children | ReactNode | ((validation: ValidationResult) => ReactNode) | - | 错误消息内容或 render 函数 |
无障碍
FieldError 组件通过以下方式确保无障碍性：
- 使用适当的 ARIA 属性播报错误
- 语义化 HTML 支持屏幕阅读器
- 提供视觉与程序化错误指示
- 根据校验状态自动管理可见性