Blackwork
回到顶部

Field

单个控件的标签、说明和布局。不依赖表单库。

Field

适用场景

  • 任何带标签的输入，即使不用表单库
  • 横向的设置行
  • 在控件旁边展示说明或校验信息

需要 TanStack Form 的状态和提交时，用 Form。

用法

预览

Used for sign-in and notices.

示例

横向

水平布局

校验

data-invalid 放在 Field 上，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 对应。