Form 设计文档

表单容器,桥接 headless createForm,提供字段注册、校验、布局与 a11y。

← API 文档

使用建议

表单容器,桥接 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)表单分组标题文字颜色