From 8283c6a1bd3d05596a7df6ae64311b3851ca4d63 Mon Sep 17 00:00:00 2001
From: Michael Small <michael.small@relationshipone.com>
Date: Wed, 29 Jul 2026 00:04:44 -0500
Subject: [PATCH 1/2] docs: add signal form example for button toggle

---
 .../button-toggle-forms-example.html                   | 10 ++++++++++
 .../button-toggle-forms/button-toggle-forms-example.ts |  8 +++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html
index ec55cadec413..0ed909762e88 100644
--- a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html
+++ b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html
@@ -1,3 +1,13 @@
+<section>
+  <h4>Button Toggle inside of a Signal form</h4>
+  <mat-button-toggle-group [formField]="fontStyleForm" aria-label="Font Style">
+    <mat-button-toggle value="bold">Bold</mat-button-toggle>
+    <mat-button-toggle value="italic">Italic</mat-button-toggle>
+    <mat-button-toggle value="underline">Underline</mat-button-toggle>
+  </mat-button-toggle-group>
+  <p>Chosen value is {{ fontStyleForm().value() }}</p>
+</section>
+
 <section>
   <h4>Button Toggle inside of a Template-driven form</h4>
   <mat-button-toggle-group [(ngModel)]="fontStyle" aria-label="Font Style">
diff --git a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts
index 1cf8dfbb669a..1e291b1a8108 100644
--- a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts
+++ b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts
@@ -1,5 +1,6 @@
 import {Component, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {form, FormField} from '@angular/forms/signals';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 /**
@@ -8,9 +9,10 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'button-toggle-forms-example',
   templateUrl: 'button-toggle-forms-example.html',
-  imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule],
+  imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, FormField],
 })
 export class ButtonToggleFormsExample {
-  fontStyleControl = new FormControl('');
-  fontStyle = signal<string | undefined>(undefined);
+  readonly fontStyleControl = new FormControl('');
+  readonly fontStyle = signal<string | undefined>(undefined);
+  readonly fontStyleForm = form(signal(''));
 }

From 08bd6d71335c87b8d4bd05d1cfbe04a995de81f3 Mon Sep 17 00:00:00 2001
From: Michael Small <michael.small@relationshipone.com>
Date: Wed, 29 Jul 2026 09:35:53 -0500
Subject: [PATCH 2/2] docs: update copy related to forms for Button Toggle

---
 src/material/button-toggle/button-toggle.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/material/button-toggle/button-toggle.md b/src/material/button-toggle/button-toggle.md
index 7634db910ab4..e41062c3ad2d 100644
--- a/src/material/button-toggle/button-toggle.md
+++ b/src/material/button-toggle/button-toggle.md
@@ -24,9 +24,8 @@ be configured globally using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection t
 
 <!-- example(button-toggle-appearance) -->
 
-### Use with `@angular/forms`
-`<mat-button-toggle-group>` is compatible with `@angular/forms` and supports both `FormsModule`
-and `ReactiveFormsModule`.
+### Use with Angular Forms
+`<mat-button-toggle-group>` is compatible with `@angular/forms` and supports `FormField`, `FormsModule`, and `ReactiveFormsModule`.
 
 ### Orientation
 The button-toggles can be rendered in a vertical orientation by adding the `vertical` attribute.