From d684ef6d23b2ab95076706f689910294abd0932e Mon Sep 17 00:00:00 2001
From: Andrey Dolgachev <adolgachev@users.noreply.github.com>
Date: Thu, 4 Dec 2025 20:33:33 +0900
Subject: [PATCH] feat(material/slide-toggle): Add option to completely hide
 label

---
 goldens/material/slide-toggle/index.api.md      |  5 ++++-
 src/dev-app/slide-toggle/slide-toggle-demo.html |  4 ++++
 src/material/slide-toggle/slide-toggle.html     | 16 +++++++++-------
 src/material/slide-toggle/slide-toggle.spec.ts  |  2 ++
 src/material/slide-toggle/slide-toggle.ts       |  3 +++
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/goldens/material/slide-toggle/index.api.md b/goldens/material/slide-toggle/index.api.md
index 4f42898e17b9..820554fd4f02 100644
--- a/goldens/material/slide-toggle/index.api.md
+++ b/goldens/material/slide-toggle/index.api.md
@@ -50,6 +50,7 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     _getAriaLabelledBy(): string | null;
     _handleClick(): void;
     hideIcon: boolean;
+    hideLabel: boolean;
     id: string;
     get inputId(): string;
     _labelId: string;
@@ -66,6 +67,8 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     // (undocumented)
     static ngAcceptInputType_hideIcon: unknown;
     // (undocumented)
+    static ngAcceptInputType_hideLabel: unknown;
+    // (undocumented)
     static ngAcceptInputType_required: unknown;
     // (undocumented)
     static ngAcceptInputType_tabIndex: unknown;
@@ -88,7 +91,7 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     validate(control: AbstractControl<boolean>): ValidationErrors | null;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "hideLabel": { "alias": "hideLabel"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, never>;
 }
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html
index 59b711ac3e9f..837d1c47acce 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo.html
+++ b/src/dev-app/slide-toggle/slide-toggle-demo.html
@@ -12,6 +12,10 @@
   <mat-slide-toggle labelPosition="before" [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
   <mat-slide-toggle labelPosition="before" hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>
 
+  <p>With no label.</p>
+
+  <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />
+
   <p>Example where the slide toggle is required inside of a form.</p>
 
   <form #form="ngForm" (ngSubmit)="onFormSubmit()">
diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html
index 6e1c74ce2ad4..bc7b8e5f1ad6 100644
--- a/src/material/slide-toggle/slide-toggle.html
+++ b/src/material/slide-toggle/slide-toggle.html
@@ -53,11 +53,13 @@
     </span>
   </button>
 
-  <!--
-    Clicking on the label will trigger another click event from the button.
-    Stop propagation here so other listeners further up in the DOM don't execute twice.
-  -->
-  <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
-    <ng-content></ng-content>
-  </label>
+  @if (!hideLabel) {
+    <!--
+      Clicking on the label will trigger another click event from the button.
+      Stop propagation here so other listeners further up in the DOM don't execute twice.
+    -->
+    <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
+      <ng-content></ng-content>
+    </label>
+  }
 </div>
diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts
index 6b6616830b32..ca91e65bef28 100644
--- a/src/material/slide-toggle/slide-toggle.spec.ts
+++ b/src/material/slide-toggle/slide-toggle.spec.ts
@@ -654,6 +654,8 @@ describe('MatSlideToggle with forms', () => {
 
     it('should update checked state on click if control is checked initially', fakeAsync(() => {
       fixture = TestBed.createComponent(SlideToggleWithModel);
+      fixture.detectChanges();
+
       slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle))!.componentInstance;
       labelElement = fixture.debugElement.query(By.css('label'))!.nativeElement;
 
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
index 2b0df39012c4..1f400f31b872 100644
--- a/src/material/slide-toggle/slide-toggle.ts
+++ b/src/material/slide-toggle/slide-toggle.ts
@@ -186,6 +186,9 @@ export class MatSlideToggle
   /** Whether to hide the icon inside of the slide toggle. */
   @Input({transform: booleanAttribute}) hideIcon: boolean;
 
+  /** Whether to hide label for the slide toggle. */
+  @Input({transform: booleanAttribute}) hideLabel: boolean;
+
   /** Whether the slide toggle should remain interactive when it is disabled. */
   @Input({transform: booleanAttribute}) disabledInteractive: boolean;