编辑表单
从输入、验证、等待到成功,给每一步一个清晰位置。
表单的品质体现在输入之外:字段之间的关系、失败后的恢复,以及提交完成后的下一步。这个模式以反馈表单展示完整的编辑过程。
安装
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
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
locale | zh / en | zh | 示例文案语言 |
FormDemo 使用 Form 的原生约束与外部 fieldErrors,配合 Field 统一关联;请求使用本地确定性响应。示例内部提供 ToastProvider,接入应用时可按实际布局复用稳定的上层 Provider。
接入真实业务
保留字段 name 作为客户端和服务端错误的共同键。异步开始后显示进行中并阻止重复操作;失败时保留输入,成功后才清空或导航。输入修正后清除对应错误,避免旧错误一直遮蔽新状态。
应用负责请求、服务端验证、错误脱敏、幂等和完成后的导航。条件必填应在前后端一致,不能只改变视觉上的星号。
键盘与验收
Tab 顺序与视觉顺序一致,Textarea 保留换行;提交失败聚焦首个错误字段。检查中文输入、错误后修改、发送期间连续点击、切换回复偏好和失败重试。
使用边界
不要在失败后重置草稿;不要只用 Toast 告知字段问题;不要让“清空”按钮意外提交表单;不要在已有 label 时只靠 placeholder 补说明。
来源与版本
0.1.0。以 Subtic 的专注编辑布局和字段反馈原则为基础,在 Kitseed 中独立组合;不包含实际反馈投递、账户身份或 API 错误契约。