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 }	—	将字段语义传递给任意控件。