跳到主要内容

Field 表单项Field · Label · Fieldset · Form

Field 把标签、控件、提示和错误文字组成一项，并自动接好 id 与 aria 属性。Fieldset 给一组相关控件加标题，Form 负责纵向排布和提交。凡是需要标签的控件，都优先放进 Field。

Field

本库的控件放进去会自动接线；原生 input / select / textarea 会被克隆接线；其它情况传函数，自己把 id 和 aria-describedby 接上。

之后可以修改
每周一早上发到邮箱

错误与禁用

error 有值即视为校验失败：控件标红并抖动一下，错误文字展开并由 aria-live 播报。只想标红不显示文字时用 invalid。disabled 会传给里面的控件。

用于登录这个邮箱已经注册过了
由管理员分配

横向排布

orientation="horizontal" 在 520px 以上把标签放到左边，窄屏自动回到上下排布。

https://
会显示在名片上

Label

不用 Field 时的独立标签，用 htmlFor 指向控件 id。required 只是视觉上的星号，控件本身还要写 required。

Fieldset

原生 fieldset + legend：给一组相关控件起名。disabled 会让里面的控件全部禁用。

收货地址仅支持中国大陆地区
发票（暂未开放）

Form

纵向表单布局。onSubmit 的第一个参数是 FormData，默认的整页跳转已被阻止。FormActions 是底部操作区，窄屏下按钮自动竖排撑满。

原生校验

默认交给浏览器校验（required / type / pattern），通过后才触发 onSubmit。

完整示例：自定义校验

加 noValidate 关掉浏览器气泡，提交时自己校验，把错误写进各个 Field 的 error。直接点“创建账号”看看错误状态；改动某一项时清掉它的错误。Select、Combobox、DatePicker 这类浮层控件放进 Field 同样会自动接线，不需要额外处理。

用于登录和接收通知
至少 8 位
选填

间距与操作区对齐

API

Field

属性类型默认值说明
labelReactNode—标签文字，渲染成 <label for>。
hintReactNode—提示文字，常驻，通过 aria-describedby 关联到控件。
errorReactNode—错误文字；有值即视为校验失败。
invalidboolean—没有错误文字但要标红时用。
requiredbooleanfalse必填：标签后显示星号，并把 required 传给控件。
disabledbooleanfalse禁用：置灰标签，并把 disabled 传给控件。
idstring—控件 id；不传自动生成。
orientation'vertical' | 'horizontal''vertical'标签在上，或在左（520px 以上）。
childrenReactNode | (control: FieldControlProps) => ReactNode—控件。传函数时拿到 id、aria-describedby、aria-invalid、required、disabled，自己接到控件上。

Label

属性类型默认值说明
htmlForstring—指向控件的 id。
requiredboolean—显示必填星号（纯视觉）。
disabledboolean—置灰。
size'sm' | 'md''sm'字号。

Fieldset

属性类型默认值说明
legendReactNode—图例（这一组的标题）。
hintReactNode—图例下的说明，通过 aria-describedby 关联。
disabledboolean—原生属性：禁用里面的全部控件。

Form / FormActions

属性类型默认值说明
Form · size'sm' | 'md' | 'lg''md'项与项的间距。
Form · onSubmit(data: FormData, event: FormEvent) => void—提交时触发；默认行为已阻止。
Form · noValidateboolean—原生属性：关掉浏览器校验，自己处理。
FormActions · align'start' | 'end' | 'between''start'按钮的对齐方式。
FormActions · stackbooleantrue窄屏（< 520px）时按钮竖排并撑满。

无障碍

  • 标签是真的 <label for>，点标签即聚焦控件；滑块、单选组这类复合控件改用 aria-labelledby 指向标签。
  • 提示和错误通过 aria-describedby 关联，读屏聚焦控件时会一并读出。
  • 错误区常驻且是 aria-live="polite"，错误出现时自动播报；同时有图标和文字，不只靠红色。
  • 必填星号对读屏隐藏，必填状态由控件上的 required / aria-required 传达。
  • Fieldset 是原生 <fieldset>，读屏进入时会先读出 legend。
  • Form 里按 Enter 提交（焦点在单行输入框时），前提是有一个 type="submit" 的按钮。提交失败后建议把焦点移到第一个出错的控件。