diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
index d7587434211166d8695269b96f639025a72a679e..3e3b1d8cb09d1569bd528d820446c39c310a293c 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
@@ -24,9 +24,12 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
       <ods-spinner-icon *ngIf="isLoading && !isError" size="large" />
     </div>
     <div class="flex grow flex-col items-start break-all text-start text-text">
-      <p class="text-sm" [ngClass]="isError && 'text-error'">
+      <p *ngIf="!isError && caption" class="text-sm">
         {{ caption }}
       </p>
+      <p *ngIf="isError && errorCaption" class="text-sm text-error">
+        {{ errorCaption }}
+      </p>
       <p *ngIf="description && !isError" class="text-xs text-text/65">
         {{ description }}
       </p>
@@ -38,7 +41,8 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
   </button>`,
 })
 export class AttachmentComponent {
-  @Input({ required: true }) caption!: string;
+  @Input() caption: string = '';
+  @Input() errorCaption: string = '';
   @Input() fileType: string = '';
   @Input() description = '';
   @Input() isLoading: boolean = false;