表单与选择@neumorphism-ui/form

Form

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

@neumorphism-ui/form

Registry JSON

预览

安装

npx shadcn@latest add @neumorphism-ui/form

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

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

用法

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

Import

"use client";

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

Example

export default function Example() {
  const [message, setMessage] = React.useState("");
  const [name, setName] = React.useState("Alex");
  const [savedName, setSavedName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"显示名称"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"输入个人资料中显示的名称。"}</FieldDescription><FieldError match="valueMissing">{"请输入名称。"}</FieldError></Field>;
  return (<Form className="w-full max-w-sm" onFormSubmit={() => { setSavedName(name); setMessage("已保存本地示例。"); }} onReset={() => { setName(savedName); setMessage(""); }}>
      {nameField}<div className="flex flex-wrap gap-3"><Button type="submit" variant="primary">{"保存更改"}</Button><Button type="reset">{"重置"}</Button></div><p role="status" className="text-sm text-[var(--muted-foreground)]">{name !== savedName ? "未保存的更改" : message || "已保存"}</p>
    </Form>);
}

API 参考

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

预览

安装

用法

Import

Example

API 参考

无障碍