Label 标签

渲染与控件关联的可访问标签。基于 Radix Vue Label，支持通过 BrConfigProvider 进行全局主题配置。

组件特性

🔗 表单关联：将标签与表单控件关联以生成正确的 ARIA 属性。
📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl 尺寸规格。
✨ 必填指示器：支持 required 属性显示必填星号。
🚫 禁用状态：支持 disabled 属性禁用标签。
↕️ 对齐方式：支持左、右、上对齐方式。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup lang="ts">
import { BrLabel } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center space-x-2">
    <input id="terms" type="checkbox" class="h-4 w-4 rounded border-gray-300 accent-primary focus:ring-primary" />
    <BrLabel for="terms">Accept terms and conditions</BrLabel>
  </div>
</template>

表单关联

Label 组件通过 for 属性与表单控件关联。点击标签会自动聚焦对应的控件。

<script setup lang="ts">
import { BrLabel, BrInput } from '@breezeui/vue'
</script>

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <BrLabel for="email">Email address</BrLabel>
    <BrInput id="email" type="email" placeholder="Email" />
  </div>
</template>

必填指示器

使用 required 属性在标签旁显示必填指示器（红色星号）。

<script setup lang="ts">
import { BrLabel, BrInput } from '@breezeui/vue'
</script>

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <BrLabel for="username" required>Username</BrLabel>
    <BrInput id="username" placeholder="Username" />
  </div>
</template>

禁用状态

使用 disabled 属性将标签设置为禁用状态，降低透明度并更改光标样式。

<script setup lang="ts">
import { BrLabel } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center space-x-2">
    <input id="disabled-input" type="checkbox" disabled class="h-4 w-4 rounded border-gray-300 accent-primary focus:ring-primary disabled:opacity-50" />
    <BrLabel for="disabled-input" disabled>Unavailable option</BrLabel>
  </div>
</template>

尺寸

使用 size 属性控制标签的大小。

<script setup lang="ts">
import { BrLabel } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
      <input id="xs" type="checkbox" class="h-3 w-3 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="xs" size="xs">Extra Small Label</BrLabel>
      <span class="text-[10px] text-muted-foreground">(10px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="sm" type="checkbox" class="h-3 w-3 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="sm" size="sm">Small Label</BrLabel>
      <span class="text-xs text-muted-foreground">(12px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="default" type="checkbox" class="h-4 w-4 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="default" size="default">Default Label</BrLabel>
      <span class="text-sm text-muted-foreground">(14px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="md" type="checkbox" class="h-4 w-4 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="md" size="md">Medium Label</BrLabel>
      <span class="text-sm text-muted-foreground">(14px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="lg" type="checkbox" class="h-5 w-5 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="lg" size="lg">Large Label</BrLabel>
      <span class="text-base text-muted-foreground">(16px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="xl" type="checkbox" class="h-6 w-6 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="xl" size="xl">Extra Large Label</BrLabel>
      <span class="text-lg text-muted-foreground">(18px)</span>
    </div>
    <div class="flex items-center gap-2">
      <input id="2xl" type="checkbox" class="h-7 w-7 rounded border-gray-300 accent-primary focus:ring-primary" />
      <BrLabel for="2xl" size="2xl">2X Large Label</BrLabel>
      <span class="text-xl text-muted-foreground">(20px)</span>
    </div>
  </div>
</template>

主题定制

全局配置 (BrConfigProvider)

你可以通过 BrConfigProvider 全局配置 Label 的基础样式，如字体颜色和圆角。


<template>
  <BrConfigProvider :theme="theme">
    <BrLabel>自定义主题标签</BrLabel>
  </BrConfigProvider>
</template>

局部覆盖 (TailwindCSS)

你可以通过 class 属性直接使用 TailwindCSS 类覆盖默认样式。

<template>
  <BrLabel class="text-blue-500 font-bold uppercase">
    自定义样式标签
  </BrLabel>
</template>

暗色模式

BrLabel 支持通过 BrConfigProvider 或 dark 类切换暗色模式。


<template>
  <div :class="{ dark: isDark }">
    <BrConfigProvider :theme="theme">
      <div class="bg-background text-foreground p-4">
        <BrLabel>暗色模式标签</BrLabel>
      </div>
    </BrConfigProvider>
  </div>
</template>

API

Props

属性名	类型	默认值	说明
`as`	`string \| Component`	`'label'`	渲染的 HTML 标签或组件
`for`	`string`	-	关联表单控件的 ID
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	标签尺寸
`align`	`'left' \| 'center' \| 'right'`	`'left'`	文本对齐方式
`required`	`boolean`	`false`	是否显示必填指示器
`disabled`	`boolean`	`false`	是否禁用标签
`class`	`string`	-	自定义类名

Slots

插槽名	说明
`default`	标签内容

#Label 标签

#组件特性

#基础用法

#表单关联

#必填指示器

#禁用状态

#尺寸

#主题定制

#全局配置 (BrConfigProvider)

#局部覆盖 (TailwindCSS)

#暗色模式

#API

#Props

#Slots