Label 标签

基于 reka-ui Label,用于表单字段标题,支持 for 关联与无障碍。

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";

API

Label

属性类型默认值说明
forstring-关联元素 id
classHTMLAttributes["class"]-附加类名

其余 props 透传至 reka-ui Label。

插槽

插槽说明
default标签文本内容