Form 表单
承载原生表单提交与校验事件，并统一表单字段的布局节奏。
使用概览
适合使用
- 一组输入需要通过原生提交语义共同保存或校验时。
不建议使用
- 区域只展示只读信息，或每个控件都是即时独立操作时。
真实示例
资料保存表单
使用原生提交事件收集并保存资料。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/form.json基础用法
导入
import { Form } from "@richardqiu/quartz/form";JSX
<Form onSubmit={(event) => { event.preventDefault(); const profile = new FormData(event.currentTarget); void profile; }}><input name="displayName" /><button type="submit">保存资料</button></Form>状态与控制摘要
默认
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
onSubmit | FormEventHandler<HTMLFormElement> | 未设置 | 处理原生表单提交并保留浏览器校验能力。 |
组合结构
- 01
Form
键盘约定
- Tab 按原生文档顺序访问可用控件，Enter 按原生表单规则提交。
可访问性契约
- 使用原生 required 属性，并为每个控件关联可见标签。
- 校验、网络请求、重试和服务端错误仍由使用方负责。