使用建议
表单容器,桥接 headless createForm,提供字段注册、校验、布局与 a11y。
Accessibility
ARIA role:form
- 原生 <form>,submit 经 preventDefault 接管
- 字段错误用 role=alert,经 aria-describedby 关联控件
- extraText 无错误时经 aria-describedby 关联
- 必填星标 aria-hidden,必填语义由校验承载
- Form.Input 经 Field 自动生成的 id 用 label for/id 精确关联控件(点击 label 聚焦 input);id 也可由 Input 外部传入
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-form-alerticon-icon-default | var(--cd-color-warning) | 警告图标颜色 |
--cd-color-form-label-disabled-text-default | var(--cd-color-disabled-text) | 禁用表单项标签文字颜色 |
--cd-color-form-label-extra-text-default | var(--cd-color-tertiary) | 表单项标签图标颜色 |
--cd-color-form-label-optional-text-default | var(--cd-color-tertiary) | 表单项标签可选标记颜色 |
--cd-color-form-label-text-default | var(--cd-color-text-0) | 表单项标签文字颜色 |
--cd-color-form-message-error-text-default | var(--cd-color-danger) | 错误提示颜色 |
--cd-color-form-requiredmark-disabled-text-default | var(--cd-color-danger) | 禁用表单项必填标记颜色 |
--cd-color-form-requiredmark-text-default | var(--cd-color-danger) | 必填标记颜色 |
--cd-color-form-section-border-default | var(--cd-color-border) | 表单分组标题底部描边颜色 |
--cd-color-form-section-text-default | var(--cd-color-text-0) | 表单分组标题文字颜色 |