Neumorphism UI

Field

用于将控件、标签、帮助与验证信息保持为关联的表单字段。

预览

姓名与错误状态

比较带有说明的受控姓名字段与明确显示必填错误的字段。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/field

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在命名的 Field 内组合 FieldLabel、FieldControl、FieldDescription 和 FieldError。通过原生约束或明确的 invalid 状态决定错误显示。

"use client";

import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";

export default function Example() {
  return (
    <Field name="displayName">
      <FieldLabel>Display name</FieldLabel>
      <FieldControl defaultValue="Alex" />
      <FieldDescription>This name appears on your profile.</FieldDescription>
    </Field>
  );
}

API 参考

把控件与标签、说明和验证错误关联起来。 使用 FieldControl 或通过 render 组合输入。除了错误颜色，还应提供 FieldError 文本。

组件属性类型默认值说明
Fieldnamestring—关联表单值与外部错误的字段名称。
Fieldvalidate(value) => string | string[] | null | Promise—返回自定义验证结果。
FieldvalidationMode"onSubmit" | "onBlur" | "onChange"—选择执行验证的时机。

无障碍

  • 01

    使用 FieldControl 或通过 render 组合输入。除了错误颜色，还应提供 FieldError 文本。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。