diff --git a/src/app/shared/ui/form-field/form-field.component.html b/src/app/shared/ui/form-field/form-field.component.html
index 08ef6c5..04d604c 100644
--- a/src/app/shared/ui/form-field/form-field.component.html
+++ b/src/app/shared/ui/form-field/form-field.component.html
@@ -8,10 +8,7 @@
     </label>
   }
 
-  <div
-    class="app-form-field__control"
-    [attr.aria-describedby]="error() ? errorId : (hint() ? hintId : null)"
-  >
+  <div class="app-form-field__control">
     <ng-content />
   </div>
 
diff --git a/src/app/shared/ui/form-field/form-field.component.ts b/src/app/shared/ui/form-field/form-field.component.ts
index 6f9dd21..3603568 100644
--- a/src/app/shared/ui/form-field/form-field.component.ts
+++ b/src/app/shared/ui/form-field/form-field.component.ts
@@ -1,21 +1,33 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 let nextFormFieldId = 0;
 
+/**
+ * Injected by form controls (e.g. app-input) nested inside app-form-field so they can
+ * self-apply `id` and `aria-describedby` without the parent template wiring them manually.
+ */
+export abstract class FormFieldContext {
+  abstract readonly fieldId: string;
+  abstract readonly describedBy: () => string | null;
+}
+
 @Component({
   selector: 'app-form-field',
   standalone: true,
   templateUrl: './form-field.component.html',
   styleUrl: './form-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: FormFieldContext, useExisting: FormFieldComponent }]
 })
-export class FormFieldComponent {
+export class FormFieldComponent implements FormFieldContext {
   readonly label = input<string | null>(null);
   readonly hint = input<string | null>(null);
   readonly error = input<string | null>(null);
   readonly required = input(false);
 
-  protected readonly fieldId = `app-form-field-${++nextFormFieldId}`;
+  readonly fieldId = `app-form-field-${++nextFormFieldId}`;
   protected readonly hintId = `${this.fieldId}-hint`;
   protected readonly errorId = `${this.fieldId}-error`;
+
+  readonly describedBy = computed(() => this.error() ? this.errorId : (this.hint() ? this.hintId : null));
 }
diff --git a/src/app/shared/ui/input/input.component.html b/src/app/shared/ui/input/input.component.html
index 78fc576..8ef7c93 100644
--- a/src/app/shared/ui/input/input.component.html
+++ b/src/app/shared/ui/input/input.component.html
@@ -8,8 +8,10 @@
   [type]="type()"
   [placeholder]="placeholder()"
   [disabled]="isDisabled || disabled()"
+  [attr.id]="formField?.fieldId ?? null"
   [attr.aria-label]="ariaLabel()"
   [attr.aria-invalid]="state() === 'error' || null"
+  [attr.aria-describedby]="formField?.describedBy() ?? null"
   [value]="value"
   (input)="handleInput($event)"
   (blur)="handleBlur()"
diff --git a/src/app/shared/ui/input/input.component.ts b/src/app/shared/ui/input/input.component.ts
index 69708aa..f8bd9c9 100644
--- a/src/app/shared/ui/input/input.component.ts
+++ b/src/app/shared/ui/input/input.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, forwardRef, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormFieldContext } from '../form-field/form-field.component';
 
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputState = 'default' | 'error' | 'success';
@@ -22,6 +23,8 @@ export type InputState = 'default' | 'error' | 'success';
   }
 })
 export class InputComponent implements ControlValueAccessor {
+  protected readonly formField = inject(FormFieldContext, { optional: true });
+
   readonly type = input<'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'>('text');
   readonly size = input<InputSize>('md');
   readonly state = input<InputState>('default');