Neumorphism UI
表单与选择@neumorphism-ui/field

Field

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

@neumorphism-ui/field
Registry JSON

预览

输入个人资料中显示的名称。

请输入名称。

安装

安装: fieldnpx shadcn@latest add @neumorphism-ui/field

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Field import 代码
"use client";

import * as React from "react";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";

Example

Field 用法代码
export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"显示名称"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"输入个人资料中显示的名称。"}</FieldDescription><FieldError match="valueMissing">{"请输入名称。"}</FieldError></Field>;
  return (<div className="grid w-full max-w-sm gap-5">{nameField}<Field invalid><FieldLabel>{"显示名称"}</FieldLabel><FieldControl defaultValue="" /><FieldError match>{"请输入名称。"}</FieldError></Field></div>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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