kitseed.
组合模式

编辑表单

从输入、验证、等待到成功,给每一步一个清晰位置。

表单的品质体现在输入之外:字段之间的关系、失败后的恢复,以及提交完成后的下一步。这个模式以反馈表单展示完整的编辑过程。

安装

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

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

可以实际体验的流程

直接提交可看到字段错误和焦点定位。姓名不能为空,允许邮件回复时校验邮箱,正文至少 10 个字符;正文上限为 1000。切换“提交响应”为失败后,输入会保留。成功后通过 Toast 反馈并进入完成状态,支持再写一条;清空已有内容需要 ConfirmDialog 明确确认。

所有交互只在本地发生,不发送姓名、邮箱或反馈内容;刷新画布会还原。示例验证规则用于展示流程,不能替代目标应用的规则。

组成

部分角色设计目的
FormLayout、PageIntro阅读结构控制表单宽度,清楚说明任务
Form、Field、Input、Select、Textarea数据编辑原生约束、错误映射、名称与说明关联
SwitchField相关偏好开关影响邮箱必填规则
FormActions、Button、Alert过程与反馈防止重复提交,保留失败上下文
ConfirmDialog、Toast风险与结果确认清空,反馈成功
EmptyState完成状态明确结束,并提供下一步

模式 API

属性类型默认值说明
localezh / enzh示例文案语言

FormDemo 使用 Form 的原生约束与外部 fieldErrors,配合 Field 统一关联;请求使用本地确定性响应。示例内部提供 ToastProvider,接入应用时可按实际布局复用稳定的上层 Provider。

接入真实业务

保留字段 name 作为客户端和服务端错误的共同键。异步开始后显示进行中并阻止重复操作;失败时保留输入,成功后才清空或导航。输入修正后清除对应错误,避免旧错误一直遮蔽新状态。

应用负责请求、服务端验证、错误脱敏、幂等和完成后的导航。条件必填应在前后端一致,不能只改变视觉上的星号。

键盘与验收

Tab 顺序与视觉顺序一致,Textarea 保留换行;提交失败聚焦首个错误字段。检查中文输入、错误后修改、发送期间连续点击、切换回复偏好和失败重试。

使用边界

不要在失败后重置草稿;不要只用 Toast 告知字段问题;不要让“清空”按钮意外提交表单;不要在已有 label 时只靠 placeholder 补说明。

来源与版本

0.1.0。以 Subtic 的专注编辑布局和字段反馈原则为基础,在 Kitseed 中独立组合;不包含实际反馈投递、账户身份或 API 错误契约。

本页内容