Label 用于表单字段的标题,通过 for 与表单控件关联,点击标签可聚焦对应控件。
- 为输入框、选择框等表单控件提供文本标签。
- 需要点击标签聚焦控件(提升可点击区域)时。
<script setup lang="ts">
import { Label, Input } from "@reglow/reui";
</script>
<template>
<Label for="email">邮箱</Label>
<Input id="email" type="email" placeholder="请输入邮箱" />
</template>
配合必填校验,可在标签文本前添加星号提示;点击标签仍可聚焦对应的输入框。
<script setup lang="ts">
import { Label, Input } from "@reglow/reui";
</script>
<template>
<Label for="name">
<span class="mr-0.5 text-destructive">*</span>
姓名
</Label>
<Input id="name" required placeholder="请输入姓名" />
</template>
当 for 关联的表单控件处于禁用状态时,点击标签不会产生聚焦交互。
<script setup lang="ts">
import { Label, Input } from "@reglow/reui";
</script>
<template>
<Label for="disabled-email">邮箱</Label>
<Input id="disabled-email" type="email" disabled value="name@example.com" />
</template>
import { Label } from "@reglow/reui";
| 属性 | 类型 | 默认值 | 说明 |
|---|
for | string | - | 关联元素 id |
class | HTMLAttributes["class"] | - | 附加类名 |
其余 props 透传至 reka-ui Label。