BreezeUI
  • English

    • Label

    Component Features

    • 🔗 Form Association: Associates labels with form controls for proper ARIA attributes.
    • 📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl size specs.
    • ✨ Required Indicator: Supports required prop to display required asterisk.
    • 🚫 Disabled State: Supports disabled prop for disabled labels.
    • ↕️ Alignment: Supports left, right, top label alignment.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

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

    Form Association

    The Label component is associated with form controls via the for attribute. Clicking the label automatically focuses the corresponding control.

    <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 Indicator

    Use the required prop to show a required indicator (red asterisk) next to the label.

    <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 State

    Use the disabled prop to set the label to a disabled state, reducing opacity and changing the cursor style.

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

    Sizes

    Use the size prop to control the size of the label.

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

    Theming

    Global Configuration (BrConfigProvider)

    You can globally configure the basic styles of Label, such as font color and border radius, via BrConfigProvider.

    
<template>
  <BrConfigProvider :theme="theme">
    <BrLabel>Custom Theme Label</BrLabel>
  </BrConfigProvider>
</template>

    Local Override (TailwindCSS)

    You can directly override default styles using TailwindCSS classes via the class prop.

    <template>
  <BrLabel class="text-blue-500 font-bold uppercase">
    Custom Styled Label
  </BrLabel>
</template>

    Dark Mode

    BrLabel supports dark mode toggling via BrConfigProvider or the dark class.

    
<template>
  <div :class="{ dark: isDark }">
    <BrConfigProvider :theme="theme">
      <div class="bg-background text-foreground p-4">
        <BrLabel>Dark Mode Label</BrLabel>
      </div>
    </BrConfigProvider>
  </div>
</template>

    API

    Props

    PropTypeDefaultDescription
    asstring | Component'label'The HTML tag or component to render
    forstring-The ID of the associated form control
    size'sm' | 'default' | 'lg''default'The size of the label
    align'left' | 'center' | 'right''left'Text alignment
    requiredbooleanfalseWhether to show the required indicator
    disabledbooleanfalseWhether the label is disabled
    classstring-Custom class names

    Slots

    SlotDescription
    defaultThe content of the label