Label 标签

新粗野主义风格的标签组件，用于表单字段，支持变体。

预览

Preview

默认标签错误标签成功标签弱化标签

尺寸

小号默认大号

必填

用户名*

邮箱*

安装

pnpm dlx brutx-vue@latest add label

用法

<script setup>
import { Label, Input } from 'brutx-ui-vue'
</script>

<template>
    <div class="space-y-2">
        <Label for="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
    </div>
</template>

必填标记

设置 required 属性后，标签末尾会自动渲染红色的 * 星号（标记为 aria-hidden），同时根元素会带上 aria-required="true" 以辅助无障碍工具识别必填项。

<script setup>
import { Label, Input } from 'brutx-ui-vue'
</script>

<template>
    <div class="space-y-2">
        <Label for="username" required>用户名</Label>
        <Input id="username" placeholder="请输入用户名" />
    </div>
</template>

变体

变体	说明
default	标准前景色文字
error	Destructive（红色）文字
success	Success（绿色）文字
muted	柔和前景色文字

尺寸

尺寸	字体大小	行高
sm	text-xs	leading-none
default	text-sm	leading-none
lg	text-base	leading-none

<script setup>
import { Label } from 'brutx-ui-vue'
</script>

<template>
    <div class="flex flex-wrap items-center gap-4">
        <Label size="sm">小号标签</Label>
        <Label size="default">默认标签</Label>
        <Label size="lg">大号标签</Label>
    </div>
</template>

API 参考

Label — 属性

名称	类型	默认值	说明
variant	"default" | "error" | "muted" | "success" | undefined	"default"	设置标签的语义颜色变体。
详情 声明类型 NonNullable<"default" | "success" | "muted" | "error" | null | undefined> | undefined 字面量 "default" "error" "muted" "success" 默认值详情 声明 'default' 来源: packages/ui/src/components/label/Label.vue 解析值 "default" 来源 Label.vue:11 packages/ui/src/components/label/Label.vue
size	"default" | "lg" | "sm" | undefined	"default"	设置标签文字和间距尺寸。
详情 声明类型 NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量 "default" "lg" "sm" 默认值详情 声明 'default' 来源: packages/ui/src/components/label/Label.vue 解析值 "default" 来源 Label.vue:12 packages/ui/src/components/label/Label.vue
required	boolean | undefined	false	在标签文字后显示必填星号装饰；需同时在表单控件上声明 required 语义。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/label/Label.vue 解析值 false 来源 Label.vue:13 packages/ui/src/components/label/Label.vue
disabled	boolean | undefined	false	呈现禁用状态样式并设置 aria-disabled；不会自动禁用关联的表单控件。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/label/Label.vue 解析值 false 来源 Label.vue:14 packages/ui/src/components/label/Label.vue
for	string | undefined	undefined	设置原生 label 的 for 属性，以关联具有相同 ID 的表单控件。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/label/Label.vue 解析值 undefined 来源 Label.vue:15 packages/ui/src/components/label/Label.vue
class	string | undefined	undefined	追加到 label 根元素的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/label/Label.vue 解析值 undefined 来源 Label.vue:16 packages/ui/src/components/label/Label.vue

Label — 插槽

名称	签名或类型	说明
#default	{}	标签显示的文本、表单字段名或其他内联内容。
详情 声明类型 {} 来源 Label.vue packages/ui/src/components/label/Label.vue

可访问性

Label 组件渲染为 HTML <label> 元素。当使用 for 属性时，它会关联到匹配的表单控件，从而改善无障碍性和点击聚焦行为。

• 当 required 为 true 时，组件会自动添加 aria-required="true" 属性
• 必填标记 * 被标记为 aria-hidden="true"，避免屏幕阅读器重复朗读
• 传入 disabled 可显式显示禁用标签状态并设置 aria-disabled="true"；组件也保留 peer-disabled 样式支持