Description

Supplementary helper text for form fields and other components. Apply av-description to a native <p> element below the associated control.

Import

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

Usage

We'll never share your email with anyone else.

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

@Component({
  selector: 'app-description-basic-demo',
  imports: [AvDescriptionComponent, AvInputComponent, AvLabelComponent],
  host: { class: 'flex flex-col gap-1' },
  template: `<label av-label for="email">Email</label>
    <input
      av-input
      aria-describedby="email-description"
      class="w-64"
      id="email"
      placeholder="you&#64;example.com"
      type="email"
    />
    <p av-description id="email-description">
      We'll never share your email with anyone else.
    </p>`,
})
export class DescriptionBasicDemo {}

Anatomy

<p av-description>Helper text</p>

With Form Fields

Pair av-description with av-label and av-input. Link them with matching id / aria-describedby for accessibility.

Password

Must be at least 8 characters with one uppercase letter

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

@Component({
  selector: 'app-description-with-form-fields-demo',
  imports: [AvDescriptionComponent, AvInputComponent, AvLabelComponent],
  host: { class: 'flex flex-col gap-1' },
  template: `<label av-label for="password">Password</label>
    <input
      av-input
      aria-describedby="password-description"
      class="w-64"
      id="password"
      type="password"
    />
    <p av-description id="password-description">
      Must be at least 8 characters with one uppercase letter
    </p>`,
})
export class DescriptionWithFormFieldsDemo {}

Styling

CSS Classes

Avesra uses BEM-style classes for predictable customization. Override them in @layer components or pass utility classes directly.

.av-description — Base description styles with muted text color

API

Prop	Type	Default	Description