Blackwork

Field

为输入控件组织标签、说明和校验信息，可独立于表单库使用。

Field

Field 将控件、标签、辅助说明和校验信息组织成一个无障碍布局，但不负责保存值或提交表单。

适用场景

  • 带标签的输入框
  • 横向的设置行
  • 在控件旁边展示说明或校验信息

需要管理字段值、校验和提交时，可以配合 Form。

用法

预览

Used for sign-in and notices.

示例

横向

水平布局

校验

校验失败时，在 Field 上用 data-invalid 标记字段状态，同时在输入控件上设置 aria-invalid。通过字段组件关联错误信息，让辅助技术获得一致的错误上下文。

校验

At least 3 characters.

API 参考

属性类型默认值说明
orientation"vertical" | "horizontal" | "responsive""vertical"标签和控件的布局方式，设置在 Field 上。
htmlForstring—将 FieldLabel 与控件 id 关联。
data-invalidboolean—标记 Field 为无效状态，同时在控件上设置 aria-invalid。

说明

  • Field 负责字段布局，字段值和提交逻辑由应用或表单库管理。
  • FieldLabel 的 htmlFor 要和控件 id 对应。