kitseed.
组件

Form 验证与提交

把字段错误、提交等待和任务级反馈放在同一上下文。

Form 在原生表单约束上组织字段错误,并把焦点带到需要修正的控件。适合设置与编辑流程;业务验证、请求和保存结果由调用方管理。

安装

pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/form.json

首次使用请先完成 Registry 与主题接入。

提交流程

先定义 name、required、type 等原生约束,再在 onSubmit 处理有效数据。客户端处理器需要调用 event.preventDefault() 阻止原生导航;异步提交开始时设置 pending,结束后更新字段错误或显示成功反馈。服务端字段键应与控件 name 一致。

Props

属性类型默认值说明
onSubmit原生 form 提交事件—处理通过约束检查的提交
fieldErrorsRecord<string, string>—外部字段错误
errorReactNode—表单级失败信息
pendingbooleanfalse等待期间阻止重复提交
feedbackbooleantrue显示默认任务级错误反馈
其他属性原生 form 属性—children、事件、样式等

FormActions 用于安排保存等动作,并可接收 error 与恢复 action。字段错误摘要由 Form 内部统一呈现。fieldErrors 由调用方控制,优先于本地约束错误;用户修改或重试时,调用方需要清除对应服务端字段错误。参见编辑表单模式。

键盘与约束

提交失败时聚焦首个有问题的字段,包括复合选择器的可见控件。Enter 提交保持表单语义;Textarea 的换行不应被全局快捷键截获。异步业务仍须在服务器端验证。

避免这样使用

不要从网络错误对象中直接渲染原始内部信息;不要仅显示 Toast 而遗漏字段错误;不要把未保存离开保护当作 Form 已内置的应用能力。

来源与版本

0.1.0,来自 Subtic apps/web/components/ui/form.tsx 与 form-context.ts。去除了产品 API 映射、写权限和桌面未保存状态。

查看由当前源码生成的类型参考

只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。

FormView

属性类型默认值
disabled?booleanfalse
summary?ReactNode—
feedback?ReactNode—
footer?ReactNode—

Form

属性类型默认值
fieldErrors?Record<string, string>emptyErrors
error?ReactNode—
feedback?booleantrue
pending?booleanfalse

FormErrorSummary

属性类型默认值
formRef{ current: HTMLFormElement | null }—
className?string—
itemClassName?string—
formatMessage?(message: string) => ReactNode—
labelSeparator?string":"

FormActionsView

属性类型默认值
childrenReactNode—
feedback?ReactNode—
className?string | undefined—

FormActions

属性类型默认值
childrenReactNode—
error?ReactNode—
action?ReactNode—
className?string—

本页内容