Components

Field / Form 表单布局

Field 将标签、说明与错误信息关联到控件；Form 提供一致的字段垂直间距。

关联输入框

传入 id 后，Field 的 label 与说明文本会自动关联到插槽内控件。

<Form class="max-w-md">
  <Field id="cluster-name" label="集群名称" hint="仅可使用小写字母、数字和连字符" required>
    <template #default="field">
      <input :id="field.id" :aria-describedby="field.describedby" />
    </template>
  </Field>
  <Input v-model="endpoint" label="API 端点" error="该端点未通过 TLS 证书校验" required />
</Form>

API 参考

属性	类型	默认值	说明
`id`	`string`	`自动生成`	控件关联 ID；显式传入可确保稳定 SSR 输出。
`label / hint / error`	`string`	`—`	标签、说明和错误文案；错误优先于说明。
`required`	`boolean`	`false`	展示必填标记；原生控件还应绑定 required。
`default slot`	`{ id, describedby, invalid }`	`—`	将字段语义传递给任意控件。