组件
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 提交事件 | — | 处理通过约束检查的提交 |
fieldErrors | Record<string, string> | — | 外部字段错误 |
error | ReactNode | — | 表单级失败信息 |
pending | boolean | false | 等待期间阻止重复提交 |
feedback | boolean | true | 显示默认任务级错误反馈 |
| 其他属性 | 原生 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? | boolean | false |
summary? | ReactNode | — |
feedback? | ReactNode | — |
footer? | ReactNode | — |
Form
| 属性 | 类型 | 默认值 |
|---|---|---|
fieldErrors? | Record<string, string> | emptyErrors |
error? | ReactNode | — |
feedback? | boolean | true |
pending? | boolean | false |
FormErrorSummary
| 属性 | 类型 | 默认值 |
|---|---|---|
formRef | { current: HTMLFormElement | null } | — |
className? | string | — |
itemClassName? | string | — |
formatMessage? | (message: string) => ReactNode | — |
labelSeparator? | string | ":" |
FormActionsView
| 属性 | 类型 | 默认值 |
|---|---|---|
children | ReactNode | — |
feedback? | ReactNode | — |
className? | string | undefined | — |
FormActions
| 属性 | 类型 | 默认值 |
|---|---|---|
children | ReactNode | — |
error? | ReactNode | — |
action? | ReactNode | — |
className? | string | — |