diff --git a/src/app/showcase/doc/colorpicker/formatdoc.ts b/src/app/showcase/doc/colorpicker/formatdoc.ts
index 5d1740b09e9..33ea87fa8c8 100644
--- a/src/app/showcase/doc/colorpicker/formatdoc.ts
+++ b/src/app/showcase/doc/colorpicker/formatdoc.ts
@@ -10,17 +10,17 @@ import { Code } from '@domain/code';
         <div class="card flex flex-wrap gap-3">
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-                <p-colorPicker [(ngModel)]="color" />
+                <p-colorPicker [(ngModel)]="color" inputId="cp-hex" />
                 <span>{{ color }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" />
+                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" inputId="cp-rgb" />
                 <span>{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" />
+                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" inputId="cp-hsb" />
                 <span>{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}</span>
             </div>
         </div>