Label

Renders an accessible label associated with form controls. Apply av-label to a native <label> element and associate it with a control using for.

Import

import { AvLabelComponent } from '@avesra/angular';

Compose with av-input, av-description, and av-field-error for labeled fields. For form-level validation, see Form.

Usage

Name

import { Component } from '@angular/core';
import { AvInputComponent, AvLabelComponent } from '@avesra/angular';

@Component({
  selector: 'app-label-basic-demo',
  imports: [AvInputComponent, AvLabelComponent],
  host: { class: 'flex w-full max-w-sm flex-col gap-1' },
  template: `<label av-label for="label-name">Name</label>
      <input
        av-input
        class="w-64"
        id="label-name"
        placeholder="Enter your name"
        type="text"
      />`,
})
export class LabelBasicDemo {}

Anatomy

Label uses the av-label attribute selector on a native <label> element. Content is projected via ng-content. Pair for on the label with id on the control.

<label av-label for="field-id">Label</label>
<input av-input id="field-id" />

Examples

With Required Indicator

Set required on av-label to show a danger-colored asterisk.

Email Address

import { Component } from '@angular/core';
import { AvInputComponent, AvLabelComponent } from '@avesra/angular';

@Component({
  selector: 'app-label-required-demo',
  imports: [AvInputComponent, AvLabelComponent],
  host: { class: 'flex w-full max-w-sm flex-col gap-1' },
  template: `<label av-label for="label-email" required>Email Address</label>
      <input
        av-input
        class="w-64"
        id="label-email"
        placeholder="you&#64;example.com"
        type="email"
      />`,
})
export class LabelRequiredDemo {}

With Disabled State

Set disabled on the label and the associated control for muted styling.

Username

import { Component } from '@angular/core';
import { AvInputComponent, AvLabelComponent } from '@avesra/angular';

@Component({
  selector: 'app-label-disabled-demo',
  imports: [AvInputComponent, AvLabelComponent],
  host: { class: 'flex w-full max-w-sm flex-col gap-1' },
  template: `<label av-label for="label-username" disabled>Username</label>
      <input
        av-input
        class="w-64"
        disabled
        id="label-username"
        placeholder="Disabled field"
        type="text"
      />`,
})
export class LabelDisabledDemo {}

With Invalid State

Set invalid on the label and the associated control for danger text styling.

Password

import { Component } from '@angular/core';
import { AvInputComponent, AvLabelComponent } from '@avesra/angular';

@Component({
  selector: 'app-label-invalid-demo',
  imports: [AvInputComponent, AvLabelComponent],
  host: { class: 'flex w-full max-w-sm flex-col gap-1' },
  template: `<label av-label for="label-password" invalid>Password</label>
      <input
        av-input
        class="w-64"
        id="label-password"
        invalid
        placeholder="Enter password"
        type="password"
      />`,
})
export class LabelInvalidDemo {}

Styling

CSS Classes

The Label component uses these CSS classes. Override them in @layer components or pass utility classes on the host.

Base Classes

.av-label — Base label styles with text styling

State Modifier Classes

.av-label--required or [data-required="true"] > .av-label — Shows required asterisk indicator
.av-label--disabled or [data-disabled="true"] .av-label — Disabled state styling
.av-label--invalid or [data-invalid="true"] .av-label or [aria-invalid="true"] .av-label — Invalid state styling (danger text color)

The required asterisk is smartly applied using role and data-slot detection. It excludes:

Elements with role="group", role="radiogroup", or role="checkboxgroup"
Elements with data-slot="radio" or data-slot="checkbox"

This prevents duplicate asterisks when using group components with required fields.

Customizing the component classes

To customize the Label classes, use the @layer components directive. Learn more.

@layer components {
  .av-label {
    @apply text-base font-semibold text-foreground;
  }

  .av-label--invalid {
    @apply text-danger;
  }
}

API

Props for label[av-label]. Children are projected with ng-content. Host classes can be passed as standard HTML class attributes.

Prop	Type	Default	Description
`for`	`string`	—	The id of the element the label is associated with.
`required`	`boolean`	`false`	Whether to display a required indicator.
`disabled`	`boolean`	`false`	Whether the label is in a disabled state.
`invalid`	`boolean`	`false`	Whether the label is in an invalid state.

Accessibility

Label is built on the native HTML <label> element and follows WAI-ARIA best practices:

Associates with form controls using the for attribute
Provides a semantic HTML <label> element
Supports keyboard navigation when associated with form controls
Communicates required and invalid states visually to users
Clicking the label focuses or activates the associated form control