Neumorphism UI

Form

用于统一管理多个字段的验证、提交与重置。

预览

保存与重置个人资料

验证必填姓名并存入本地状态，再将编辑恢复至最后保存的值，不发送服务器请求。

正在加载预览。

安装

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

npx shadcn@latest add @neumorphism-ui/form

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

保存与重置个人资料

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/field @neumorphism-ui/form
Registry JSON

用法

组合命名的 Field，以及明确 type 的提交和重置按钮。用 onFormSubmit 处理通过验证的提交，并定义如何恢复受控值。

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";

export default function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <Form onFormSubmit={() => setSaved(true)} onChange={() => setSaved(false)}>
      <Field name="displayName">
        <FieldLabel>Display name</FieldLabel>
        <FieldControl required />
        <FieldError match="valueMissing">Enter a name.</FieldError>
      </Field>
      <Button type="submit" variant="primary">Save profile</Button>
      <p role="status">{saved ? "Profile saved locally." : ""}</p>
    </Form>
  );
}

API 参考

协调字段验证和提交错误的原生表单。 区分保存与重置。示例只更新本地状态，不包含服务器持久化。

组件属性类型默认值说明
FormonFormSubmit(values, eventDetails) => void—接收验证后的值，并阻止原生提交。
FormerrorsRecord<string, string | string[]>—按字段名称关联外部错误。
FormvalidationMode"onSubmit" | "onBlur" | "onChange"—选择执行验证的时机。

无障碍

  • 01

    区分保存与重置。示例只更新本地状态，不包含服务器持久化。

  • 02

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