Label

表单标签,基于 reka-ui Label。

基本用法

关联表单控件

通过 for 属性关联同 id 的表单控件。

邮箱地址

<script setup lang="ts">
import { Label } from '@tripo3d/design';
</script>

<template>
  <Label for="email">邮箱地址</Label>
  <input id="email" type="email" />
</template>

自定义样式

使用 class 覆写

Label 可接受任意 class 调整字号、颜色等。

用户名

<Label for="username" class="text-base font-bold text-blue-1">用户名</Label>
<input id="username" type="text" />

API

Props

名称	类型	默认值	说明
for	string	—	关联的表单元素 id
class	string	—	额外 class

Slots

插槽	作用域	说明
default	—	标签文本内容

可访问性

• 基于 reka-ui Label,点击 Label 会自动聚焦/激活关联控件
• 始终使用 for 属性显式关联控件,避免依赖结构嵌套
• 保持标签文本简洁明确,避免堆叠过多描述