Label

Neo-brutalist label component for form fields, with variant support.

Demo

Preview

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

尺寸

小号默认大号

必填

用户名*

邮箱*

Installation

pnpm dlx brutx-vue@latest add label

Usage

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

When the required prop is set, a red * asterisk is automatically rendered at the end of the label (marked as aria-hidden), and the root element gets aria-required="true" to help accessibility tools identify required fields.

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

<template>
    <div class="space-y-2">
        <Label for="username" required>Username</Label>
        <Input id="username" placeholder="Enter your username" />
    </div>
</template>

Variants

Variant	Description
default	Standard foreground text
error	Destructive (red) text
success	Success (green) text
muted	Muted foreground text

Sizes

Size	Font Size	Line Height
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">Small Label</Label>
        <Label size="default">Default Label</Label>
        <Label size="lg">Large Label</Label>
    </div>
</template>

API Reference

Label — Props

Name	Type	Default	Description
variant	"default" | "error" | "muted" | "success" | undefined	"default"	Sets the semantic color variant of the label.
Details Declared type NonNullable<"default" | "success" | "muted" | "error" | null | undefined> | undefined Literal values "default" "error" "muted" "success" Default value details Declaration 'default' Source: packages/ui/src/components/label/Label.vue Resolved value "default" Source Label.vue:11 packages/ui/src/components/label/Label.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the label text and spacing size.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/label/Label.vue Resolved value "default" Source Label.vue:12 packages/ui/src/components/label/Label.vue
required	boolean | undefined	false	Shows a decorative required asterisk after the label text; declare required semantics on the form control as well.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/label/Label.vue Resolved value false Source Label.vue:13 packages/ui/src/components/label/Label.vue
disabled	boolean | undefined	false	Applies disabled-state styling and sets aria-disabled; it does not disable the associated form control.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/label/Label.vue Resolved value false Source Label.vue:14 packages/ui/src/components/label/Label.vue
for	string | undefined	undefined	Sets the native label for attribute to associate it with a form control that has the same ID.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/label/Label.vue Resolved value undefined Source Label.vue:15 packages/ui/src/components/label/Label.vue
class	string | undefined	undefined	CSS classes added to the label root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/label/Label.vue Resolved value undefined Source Label.vue:16 packages/ui/src/components/label/Label.vue

Label — Slots

Name	Signature or type	Description
#default	{}	The displayed label text, field name, or other inline content.
Details Declared type {} Source Label.vue packages/ui/src/components/label/Label.vue

Accessibility

The Label component renders as an HTML <label> element. When using the for attribute, it associates with the matching form control, improving accessibility and click-to-focus behavior.

• When required is true, the component automatically adds the aria-required="true" attribute
• The required indicator * is marked as aria-hidden="true" to avoid duplicate announcements by screen readers
• Pass disabled to explicitly show the disabled label state and set aria-disabled="true"; peer-disabled styling remains available