Label

Renders an accessible label associated with controls. Based on Radix Vue Label, supports global theming via BrConfigProvider.

Basic Usage

Accept terms and conditions

Example

Form Association

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

Email address

Example

Required Indicator

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

Username*

Example

Disabled State

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

Unavailable option

Example

Sizes

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

Extra Small Label(10px)

Small Label(12px)

Default Label(14px)

Medium Label(14px)

Large Label(16px)

Extra Large Label(18px)

2X Large Label(20px)

Example

Theming

Global Configuration (BrConfigProvider)

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

<script setup>
import { BrConfigProvider, BrLabel } from '@breezeui/vue'

const theme = {
  primary: '#16A34A', // Change primary color
  radius: 0.75, // Change border radius
}
</script>

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

<script setup>
import { ref } from 'vue'
import { BrConfigProvider, BrLabel } from '@breezeui/vue'

const isDark = ref(true)
const theme = {
  background: '#020817',
  foreground: '#F8FAFC',
}
</script>

<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

Prop	Type	Default	Description
as	string | Component	'label'	The HTML tag or component to render
for	string	-	The ID of the associated form control
size	'sm' | 'default' | 'lg'	'default'	The size of the label
align	'left' | 'center' | 'right'	'left'	Text alignment
required	boolean	false	Whether to show the required indicator
disabled	boolean	false	Whether the label is disabled
class	string	-	Custom class names

Slots

Slot	Description
default	The content of the label