表单

Label 字段说明标签

用于字段说明标签场景的 MoriUI 组件。

资源

导入

import { Label } from 'moriui'

字段中的标签

完整字段优先使用 FieldLabel、FieldDescription 与 FieldError；独立场景直接使用 Label。

RTL

Label 继承外围 dir，并通过 for 关联方向无关的控件 id。

示例

概览

Label 与 Checkbox 通过 for/id 建立关联。

接受条款与条件

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Checkbox, Label } from 'moriui'

  const checked = shallowRef(false)
</script>

<template>
  <div class="flex items-center gap-2">
    <Checkbox id="terms-label" v-model="checked" /><Label for="terms-label">接受条款与条件</Label>
  </div>
</template>

RTL

阿拉伯语标签继承 RTL 方向。

قبول الشروط والأحكام

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Checkbox, Label } from 'moriui'

  const checked = shallowRef(false)
</script>

<template>
  <div dir="rtl" class="flex items-center gap-2">
    <Checkbox id="terms-label-rtl" v-model="checked" dir="rtl" /><Label for="terms-label-rtl">قبول الشروط والأحكام</Label>
  </div>
</template>

API

属性	类型	默认值	说明
for	`string`	`undefined`	关联表单控件的 id。
as / asChild	`string \| Component / boolean`	`'label' / false`	来自 Reka Label 的元素组合能力。
class	`HTMLAttributes["class"]`	`undefined`	合并到标签基础样式。

无障碍说明

Label 复用 Reka UI 的 label 行为。for 必须指向唯一控件 id，点击标签即可聚焦或切换控件；不要用无语义文本替代标签，复杂表单优先组合 FieldLabel。

关联组件

单行输入