diff --git a/src/app/form-field-info/form-field-info.html b/src/app/form-field-info/form-field-info.html
new file mode 100644
index 0000000..e3924bf
--- /dev/null
+++ b/src/app/form-field-info/form-field-info.html
@@ -0,0 +1,7 @@
+<ul>
+  @for (message of messages(); track $index) {
+  <li [class]="message.cssClass">
+    <small>{{ message.info }}</small>
+  </li>
+  }
+</ul>
diff --git a/src/app/form-field-info/form-field-info.scss b/src/app/form-field-info/form-field-info.scss
new file mode 100644
index 0000000..8db87ba
--- /dev/null
+++ b/src/app/form-field-info/form-field-info.scss
@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  margin-top: -0.75rem;
+  margin-bottom: 1rem;
+}
+
+ul {
+  padding: 0;
+
+  li {
+    list-style: none;
+    font-size: 0.8em;
+
+    &.pending {
+      color: #886b02;
+    }
+
+    &.invalid {
+      color: var(--pico-del-color);
+    }
+
+    &.valid {
+      color: var(--pico-ins-color);
+    }
+  }
+}
diff --git a/src/app/form-field-info/form-field-info.spec.ts b/src/app/form-field-info/form-field-info.spec.ts
new file mode 100644
index 0000000..86d54f7
--- /dev/null
+++ b/src/app/form-field-info/form-field-info.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormFieldInfo } from './form-field-info';
+
+describe('FormFieldInfo', () => {
+  let component: FormFieldInfo;
+  let fixture: ComponentFixture<FormFieldInfo>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormFieldInfo]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FormFieldInfo);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/form-field-info/form-field-info.ts b/src/app/form-field-info/form-field-info.ts
new file mode 100644
index 0000000..e58d409
--- /dev/null
+++ b/src/app/form-field-info/form-field-info.ts
@@ -0,0 +1,28 @@
+import { Component, computed, input, signal } from '@angular/core';
+import { FieldTree } from '@angular/forms/signals';
+
+import { FIELD_INFO } from '../form-props';
+
+@Component({
+  selector: 'app-form-field-info',
+  imports: [],
+  templateUrl: './form-field-info.html',
+  styleUrl: './form-field-info.scss',
+})
+export class FormFieldInfo<T> {
+  readonly fieldRef = input.required<FieldTree<T>>();
+
+  protected readonly messages = computed(() => {
+    const field = this.fieldRef()();
+    let messages: { info: string; cssClass: 'info' | 'pending' | 'valid' | 'invalid' }[] = [];
+
+    if (field.pending()) {
+      messages = [{ info: 'Checking availability ...', cssClass: 'pending' }];
+    } else if (field.touched() && field.errors().length > 0) {
+      messages = field.errors().map((e) => ({ info: e.message || 'Invalid', cssClass: 'invalid' }));
+    } else if (field.hasMetadata(FIELD_INFO)) {
+      messages = [{ info: field.metadata(FIELD_INFO)!, cssClass: field.valid() ? 'valid': 'info' }];
+    }
+    return messages;
+  });
+}
diff --git a/src/app/form-props.ts b/src/app/form-props.ts
new file mode 100644
index 0000000..cbfa5f0
--- /dev/null
+++ b/src/app/form-props.ts
@@ -0,0 +1,3 @@
+import { createMetadataKey } from "@angular/forms/signals";
+
+export const FIELD_INFO = createMetadataKey<string>()
diff --git a/src/app/multiselect/multiselect.html b/src/app/multiselect/multiselect.html
index 0c4de14..25af118 100644
--- a/src/app/multiselect/multiselect.html
+++ b/src/app/multiselect/multiselect.html
@@ -1,4 +1,4 @@
-<details class="dropdown" [ariaDisabled]="disabled()">
+<details class="dropdown" [aria-disabled]="disabled()" [aria-describedby]="ariaDescribedBy()">
   <summary>
     {{ label() }}
   </summary>
diff --git a/src/app/multiselect/multiselect.ts b/src/app/multiselect/multiselect.ts
index 14c9011..693aa49 100644
--- a/src/app/multiselect/multiselect.ts
+++ b/src/app/multiselect/multiselect.ts
@@ -11,6 +11,7 @@ export class Multiselect implements FormValueControl<string[]> {
   readonly value = model<string[]>([]);
   readonly errors = input<readonly WithOptionalField<ValidationError>[]>([]);
   readonly disabled = input<boolean>(false);
+  readonly ariaDescribedBy = input<string>();
 
   readonly label = input.required<string>();
   readonly selectOptions = input.required<string[]>();
diff --git a/src/app/registration-form-3/registration-form-3.html b/src/app/registration-form-3/registration-form-3.html
index a004a70..8bdc1c7 100644
--- a/src/app/registration-form-3/registration-form-3.html
+++ b/src/app/registration-form-3/registration-form-3.html
@@ -11,13 +11,12 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
     >Username
     <input
       type="text"
+      id="myField"
+      aria-describedby="username-info"
       [field]="registrationForm.username"
       [aria-invalid]="ariaInvalidState(registrationForm.username)"
     />
-    @if (registrationForm.username().pending()) {
-      <small>Checking availability ...</small>
-    }
-    <app-form-error [fieldRef]="registrationForm.username" />
+    <app-form-field-info id="username-info" [fieldRef]="registrationForm.username" />
   </label>
 
   <!-- A whole child form with own model -->
@@ -29,10 +28,11 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
       >Age
       <input
         type="number"
+        aria-describedby="age-info"
         [field]="registrationForm.age"
         [aria-invalid]="ariaInvalidState(registrationForm.age)"
       />
-      <app-form-error [fieldRef]="registrationForm.age" />
+      <app-form-field-info id="age-info" [fieldRef]="registrationForm.age" />
     </label>
   </div>
 
@@ -42,22 +42,24 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
       <input
         type="password"
         autocomplete
+        aria-describedby="pw1-info"
         [field]="registrationForm.password.pw1"
         [aria-invalid]="ariaInvalidState(registrationForm.password.pw1)"
       />
-      <app-form-error [fieldRef]="registrationForm.password.pw1" />
+      <app-form-field-info id="pw-info pw1-info" [fieldRef]="registrationForm.password.pw1" />
     </label>
     <label
       >Password Confirmation
       <input
         type="password"
         autocomplete
+        aria-describedby="pw2-info"
         [field]="registrationForm.password.pw2"
         [aria-invalid]="ariaInvalidState(registrationForm.password.pw2)"
       />
-      <app-form-error [fieldRef]="registrationForm.password.pw2" />
+      <app-form-field-info id="pw-info pw2-info" [fieldRef]="registrationForm.password.pw2" />
     </label>
-    <app-form-error [fieldRef]="registrationForm.password" />
+    <app-form-field-info aria-describedby="pw-info" [fieldRef]="registrationForm.password" />
   </div>
   <fieldset>
     <legend>
@@ -70,39 +72,42 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
         <div role="group">
           <input
             type="email"
+            [aria-describedby]="`email-info email${$index}-info`"
             [field]="emailField"
             [aria-label]="'E-Mail ' + $index"
             [aria-invalid]="ariaInvalidState(emailField)"
           />
           <button type="button" (click)="removeEmail($index)">-</button>
         </div>
-        <app-form-error [fieldRef]="emailField" />
+        <app-form-field-info [id]="`email-info email${$index}-info`" aria-describedby="pw1-info" [fieldRef]="emailField" />
       </div>
       }
     </div>
-    <app-form-error [fieldRef]="registrationForm.email" />
+    <app-form-field-info id="email-info" [fieldRef]="registrationForm.email" />
   </fieldset>
   <label
     >Subscribe to Newsletter?
     <input type="checkbox" [field]="registrationForm.newsletter" />
   </label>
   <app-multiselect
+    ariaDescribedby="newsletter-topics-info"
     [field]="registrationForm.newsletterTopics"
     [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
     label="Topics (multiple possible):"
   />
-  <app-form-error [fieldRef]="registrationForm.newsletterTopics" />
+  <app-form-field-info id="newsletter-topics-info" [fieldRef]="registrationForm.newsletterTopics" />
   <label
     >I agree to the terms and conditions
     <input
       type="checkbox"
+      aria-describedby="agree-info"
       [aria-invalid]="ariaInvalidState(registrationForm.agreeToTermsAndConditions)"
       [field]="registrationForm.agreeToTermsAndConditions"
     />
   </label>
-  <app-form-error [fieldRef]="registrationForm.agreeToTermsAndConditions" />
+  <app-form-field-info aria-describedby="agree-info" [fieldRef]="registrationForm.agreeToTermsAndConditions" />
   <hr />
-  <app-form-error [fieldRef]="registrationForm" />
+  <app-form-field-info [fieldRef]="registrationForm" />
   <div role="group">
     <button
       type="submit"
diff --git a/src/app/registration-form-3/registration-form-3.ts b/src/app/registration-form-3/registration-form-3.ts
index 4407a21..9e9f0a6 100644
--- a/src/app/registration-form-3/registration-form-3.ts
+++ b/src/app/registration-form-3/registration-form-3.ts
@@ -1,9 +1,10 @@
 import { Component, inject, resource, signal } from '@angular/core';
-import { apply, applyEach, applyWhen, debounce, disabled, email, Field, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
+import { apply, applyEach, applyWhen, debounce, disabled, email, Field, FieldTree, form, maxLength, metadata, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
 
 import { BackButton } from '../back-button/back-button';
 import { DebugOutput } from '../debug-output/debug-output';
-import { FormError } from '../form-error/form-error';
+import { FormFieldInfo } from '../form-field-info/form-field-info';
+import { FIELD_INFO } from '../form-props';
 import { GenderIdentity, IdentityForm, identitySchema, initialGenderIdentityState } from '../identity-form/identity-form';
 import { Multiselect } from '../multiselect/multiselect';
 import { RegistrationService } from '../registration-service';
@@ -60,6 +61,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
     },
     onError: () => undefined
   });
+  metadata(schemaPath.username, FIELD_INFO, () => "A username must consists of 3-12 characters.")
 
   // Age validation
   min(schemaPath.age, 18, { message: 'You must be >=18 years old.' });
@@ -81,6 +83,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
   applyEach(schemaPath.email, (emailPath) => {
     email(emailPath, { message: 'E-Mail format is invalid' });
   });
+  metadata(schemaPath.email, FIELD_INFO, () => "Please enter at least one valid E-Mail address")
 
   // Password validation
   required(schemaPath.password.pw1, { message: 'A password is required' });
@@ -104,6 +107,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
           message: 'The entered password must match with the one specified in "Password" field',
         };
   });
+  metadata(schemaPath.password, FIELD_INFO, () => "Please enter a password with min 8 characters and a special character.")
 
   // Newsletter validation
   applyWhen(
@@ -130,7 +134,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
 
 @Component({
   selector: 'app-registration-form-3',
-  imports: [BackButton, Field, DebugOutput, FormError, IdentityForm, Multiselect],
+  imports: [BackButton, Field, DebugOutput, FormFieldInfo, IdentityForm, Multiselect],
   templateUrl: './registration-form-3.html',
   styleUrl: './registration-form-3.scss',
   // Also possible: set SignalFormsConfig only for local component: