diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.css b/src/app/components/tristatecheckbox/tristatecheckbox.css
deleted file mode 100644
index 11d05e8bd90..00000000000
--- a/src/app/components/tristatecheckbox/tristatecheckbox.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@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 820ad42ba73..4a5c7148f82 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 class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+            <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 class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
+        basic: `<p-triStateCheckbox [(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 class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+    <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts
index 95d94ad0370..5ba39a33a97 100644
--- a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts
@@ -5,11 +5,11 @@ import { Code } from '../../domain/code';
     selector: 'invalid-doc',
     template: `
         <app-docsectiontext>
-        <p>Invalid state style is added using the <i>ng-invalid</i> and <i>ng-dirty</i> class to indicate a failed validation.</p>
+            <p>Invalid state style is added using the <i>ng-invalid</i> and <i>ng-dirty</i> class to indicate a failed validation.</p>
         </app-docsectiontext>
         <div class="card flex flex-column gap-3 align-items-center">
             <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox" class="ng-dirty ng-invalid"></p-triStateCheckbox>
-            <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+            <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-invalid-demo"></app-code>
     `
@@ -19,11 +19,11 @@ export class InvalidDoc {
 
     code: Code = {
         basic: `<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox" class="ng-dirty ng-invalid"></p-triStateCheckbox>
-<label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>`,
+<label  for="tricheckbox">{{ value === null ? 'null' : value }}</label>`,
 
         html: `<div class="card flex flex-column gap-3 align-items-center">
     <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox" class="ng-dirty ng-invalid"></p-triStateCheckbox>
-    <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+    <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 d1d6dbc6467..ce55dea5628 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 class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+                <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 class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+    <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 class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+        <label  for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
     </form>
 </div>`,