diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.css b/src/app/components/tristatecheckbox/tristatecheckbox.css
index e69de29bb2d..11d05e8bd90 100644
--- a/src/app/components/tristatecheckbox/tristatecheckbox.css
+++ b/src/app/components/tristatecheckbox/tristatecheckbox.css
@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-tristatecheckbox-label {
+        cursor: pointer;
+    }
+}
diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
index 4a5c7148f82..820ad42ba73 100644
--- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex flex-column gap-3 align-items-center">
             <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-            <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+            <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-basic-demo"></app-code>
     `
@@ -18,12 +18,12 @@ export class BasicDoc {
     value: boolean | null = null;
 
     code: Code = {
-        basic: `<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
+        basic: `<p-triStateCheckbox class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
 
         html: `
 <div class="card flex flex-column gap-3 align-items-center">
     <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-    <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+    <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
index 5158dbaef75..d1d6dbc6467 100644
--- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
@@ -11,7 +11,7 @@ import { Code } from '../../domain/code';
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
                 <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-                <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+                <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
             </form>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-reactive-forms-demo"></app-code>
@@ -29,14 +29,14 @@ export class ReactiveFormsDoc implements OnInit {
     code: Code = {
         basic: `<form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
     <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-    <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+    <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
 </form>`,
 
         html: `
 <div class="card flex justify-content-center">
     <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
         <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-        <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+        <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
     </form>
 </div>`,