来源：https://ui.docs.xihanfun.com/components/field # Field 表单字段 为表单控件提供标签、说明、错误信息和状态关联。
Headless Styles Vue React Web Components
## 用法 为控件添加标签与说明 ```vue ``` ```html

用于接收账单与安全提醒

 ``` ## 组件结构 加粗的是必需部件。 `data-scope="field"`：**`root`** · `label` · **`control`** · `description` · `error-text` ## 示例 ### 必填与校验 显示字段错误 ```vue ``` ```html

用于接收账单与安全提醒

邮箱格式不正确

 ``` ### 禁用 禁止编辑字段 ```vue ``` ```html

账号创建后不可更改

 ``` ### 标签左置 将标签放在控件左侧 ```vue ``` ```html

留空表示使用默认端口

端口只能是数字

 ``` ## 设计指引 ### 何时使用 - 表单控件需要可见标签、说明或错误信息。 - 需要统一管理必填、禁用、只读和无效状态。 ### 何时不用 - 不需要可见标签的紧凑控件直接提供 `aria-label`。 - 需要管理整张表单的值和提交时，使用[表单](./form)。 ### 特性 - 自动关联标签、说明、错误信息与控件。 - `disabled`、`readOnly`、`invalid` 和 `required` 可传递给内部控件。 - 说明和错误信息可以同时显示。 - `FieldControl` 默认将属性合并到唯一子节点。 ### 组合 - 包裹任何单一控件：[文本字段](./text-field)、[选择器](./select)、[开关](./switch)等会把字段状态接到实际控件上。 - 多个字段一起提交与校验时放入[表单](./form)；一组相关字段使用[字段集](./fieldset)分区。 ### 最佳实践 - 使用持续可见的明确标签。 - 把 `control` 标在真控件（``、`