From e2f96bf2546bf7d9d30b6bdf7fc04a2c53fd3825 Mon Sep 17 00:00:00 2001
From: Brandy Smith <brandyscarney@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:44:25 -0500
Subject: [PATCH 1/6] docs(config): add logLevel to config options (#3998)

---
 docs/developing/config.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/developing/config.md b/docs/developing/config.md
index 02ac03567e2..0f70b8da46d 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -178,6 +178,7 @@ Below are the config options that Ionic uses.
 | `loadingEnter`              | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-loading`, overriding the default "animation".                                                                                                                                                                                           |
 | `loadingLeave`              | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-loading`, overriding the default "animation".                                                                                                                                                                                           |
 | `loadingSpinner`            | `SpinnerTypes`                                                                    | Overrides the default spinner for all `ion-loading` overlays.                                                                                                                                                                                                                          |
+| `logLevel`                  | `'OFF' \| 'ERROR' \| 'WARN'`                                                      | Configures the logging level for Ionic Framework. If `'OFF'`, no errors or warnings are logged. If `'ERROR'`, only errors are logged. If `'WARN'`, errors and warnings are logged.                                                                                                     |
 | `menuIcon`                  | `string`                                                                          | Overrides the default icon in all `<ion-menu-button>` components.                                                                                                                                                                                                                      |
 | `menuType`                  | `string`                                                                          | Overrides the default menu type for all `<ion-menu>` components.                                                                                                                                                                                                                       |
 | `modalEnter`                | `AnimationBuilder`                                                                | Provides a custom enter animation for all `ion-modal`, overriding the default "animation".                                                                                                                                                                                             |

From 65ef887506a483691c7823e80acbd16db1e824bc Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:07:37 -0700
Subject: [PATCH 2/6] feat(modal): add expandToScroll section (#4021)

---
 docs/api/modal.md                             |   8 +
 .../angular/example_component_html.md         | 165 ++++++++++++++++
 .../angular/example_component_ts.md           |  36 ++++
 .../v8/modal/sheet/expand-to-scroll/demo.html | 179 +++++++++++++++++
 .../v8/modal/sheet/expand-to-scroll/index.md  |  26 +++
 .../sheet/expand-to-scroll/javascript.md      | 140 +++++++++++++
 .../v8/modal/sheet/expand-to-scroll/react.md  | 185 ++++++++++++++++++
 .../v8/modal/sheet/expand-to-scroll/vue.md    | 181 +++++++++++++++++
 8 files changed, 920 insertions(+)
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/demo.html
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/index.md
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/javascript.md
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/react.md
 create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/vue.md

diff --git a/docs/api/modal.md b/docs/api/modal.md
index d8fb298ded3..1249e2a813b 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -157,6 +157,14 @@ import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle
 
 <SheetHandleBehaviorExample />
 
+### Scrolling content at all breakpoints
+
+Sheet modals can be configured to allow scrolling content at all breakpoints, making them ideal for displaying content larger than the viewport. By setting the `expandToScroll` property to `false`, the content remains scrollable at every breakpoint. Otherwise, by default, scrolling is only enabled when the sheet modal is fully expanded.
+
+import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md';
+
+<SheetScrollingContentExample />
+
 ## Styling
 
 Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md
new file mode 100644
index 00000000000..5357e9e82ef
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md
@@ -0,0 +1,165 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal
+    trigger="open-modal"
+    [initialBreakpoint]="0.25"
+    [breakpoints]="[0, 0.25, 0.5, 0.75, 1]"
+    [expandToScroll]="false"
+  >
+    <ng-template>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Jack Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Claire Smith</h2>
+              <p>Graphic Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=c"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Kim Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Alex Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Eric Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Grace Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Henry Smith</h2>
+              <p>Product Owner</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Oliver Smith</h2>
+              <p>COO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Emma Smith</h2>
+              <p>CTO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md
new file mode 100644
index 00000000000..c41fa70b4e3
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html
new file mode 100644
index 00000000000..79516adaef7
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal | Sheet</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>App</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+        <ion-modal trigger="open-modal" initial-breakpoint="0.25" expand-to-scroll="false">
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=b" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Jack Smith</h2>
+                  <p>Product Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=a" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Claire Smith</h2>
+                  <p>Graphic Designer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=c" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Kim Smith</h2>
+                  <p>Software Engineer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Alex Smith</h2>
+                  <p>Software Engineer</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Eric Smith</h2>
+                  <p>Product Manager</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Grace Smith</h2>
+                  <p>Product Manager</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Henry Smith</h2>
+                  <p>Product Owner</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=d" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img src="https://i.pravatar.cc/300?u=e" />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Oliver Smith</h2>
+                  <p>COO</p>
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                  <ion-img
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </ion-avatar>
+                <ion-label>
+                  <h2>Emma Smith</h2>
+                  <p>CTO</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const modal = document.querySelector('ion-modal');
+
+      modal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/index.md b/static/usage/v8/modal/sheet/expand-to-scroll/index.md
new file mode 100644
index 00000000000..f656ead1a57
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/modal/sheet/expand-to-scroll/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md b/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md
new file mode 100644
index 00000000000..b4f04b5a634
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md
@@ -0,0 +1,140 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal trigger="open-modal" initial-breakpoint="0.25" expand-to-scroll="false">
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=b" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Connor Smith</h2>
+            <p>Sales Rep</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Jack Smith</h2>
+            <p>Product Designer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=a" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Daniel Smith</h2>
+            <p>Product Designer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Claire Smith</h2>
+            <p>Graphic Designer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=c" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Kim Smith</h2>
+            <p>Software Engineer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Alex Smith</h2>
+            <p>Software Engineer</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Eric Smith</h2>
+            <p>Product Manager</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Grace Smith</h2>
+            <p>Product Manager</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Henry Smith</h2>
+            <p>Product Owner</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=d" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Greg Smith</h2>
+            <p>Director of Operations</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="https://i.pravatar.cc/300?u=e" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Zoey Smith</h2>
+            <p>CEO</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Oliver Smith</h2>
+            <p>COO</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>
+            <h2>Emma Smith</h2>
+            <p>CTO</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  var modal = document.querySelector('ion-modal');
+
+  modal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
+</script>
+```
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/react.md b/static/usage/v8/modal/sheet/expand-to-scroll/react.md
new file mode 100644
index 00000000000..e6afd40b516
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/react.md
@@ -0,0 +1,185 @@
+```tsx
+import React from 'react';
+import {
+  IonButton,
+  IonModal,
+  IonHeader,
+  IonContent,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonImg,
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>App</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="open-modal" expand="block">
+          Open Sheet Modal
+        </IonButton>
+        <IonModal
+          trigger="open-modal"
+          initialBreakpoint={0.25}
+          breakpoints={[0, 0.25, 0.5, 0.75, 1]}
+          expandToScroll={false}
+        >
+          <IonContent className="ion-padding">
+            <IonList>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=b" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Connor Smith</h2>
+                  <p>Sales Rep</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Jack Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=a" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Daniel Smith</h2>
+                  <p>Product Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Claire Smith</h2>
+                  <p>Graphic Designer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=c" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Kim Smith</h2>
+                  <p>Software Engineer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Alex Smith</h2>
+                  <p>Software Engineer</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Eric Smith</h2>
+                  <p>Product Manager</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Grace Smith</h2>
+                  <p>Product Manager</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Henry Smith</h2>
+                  <p>Product Owner</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=d" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Greg Smith</h2>
+                  <p>Director of Operations</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=e" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Zoey Smith</h2>
+                  <p>CEO</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg
+                    alt="Silhouette of a person's head"
+                    src="https://ionicframework.com/docs/img/demos/avatar.svg"
+                  />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Oliver Smith</h2>
+                  <p>COO</p>
+                </IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonAvatar slot="start">
+                  <IonImg src="https://i.pravatar.cc/300?u=f" />
+                </IonAvatar>
+                <IonLabel>
+                  <h2>Emma Smith</h2>
+                  <p>CTO</p>
+                </IonLabel>
+              </IonItem>
+            </IonList>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/vue.md b/static/usage/v8/modal/sheet/expand-to-scroll/vue.md
new file mode 100644
index 00000000000..57526a20fed
--- /dev/null
+++ b/static/usage/v8/modal/sheet/expand-to-scroll/vue.md
@@ -0,0 +1,181 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>App</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+    <ion-modal
+      trigger="open-modal"
+      :initial-breakpoint="0.25"
+      :breakpoints="[0, 0.25, 0.5, 0.75, 1]"
+      :expand-to-scroll="false"
+    >
+      <ion-content class="ion-padding">
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Jack Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Claire Smith</h2>
+              <p>Graphic Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=c"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Kim Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Alex Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Eric Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Grace Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Henry Smith</h2>
+              <p>Product Owner</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Oliver Smith</h2>
+              <p>COO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Emma Smith</h2>
+              <p>CTO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IonButton,
+    IonModal,
+    IonHeader,
+    IonContent,
+    IonToolbar,
+    IonTitle,
+    IonItem,
+    IonList,
+    IonAvatar,
+    IonImg,
+    IonLabel,
+  } from '@ionic/vue';
+</script>
+```

From cd309cc68b8ec8c5d8bab2e8a997063922169072 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:08:37 -0700
Subject: [PATCH 3/6] docs(radio): add helperText and errorText section through
 radio-group (#4034)

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/radio.md                             | 10 +++
 .../angular/example_component_html.md         | 18 ++++++
 .../angular/example_component_ts.md           | 29 +++++++++
 static/usage/v8/radio/helper-error/demo.html  | 62 +++++++++++++++++++
 static/usage/v8/radio/helper-error/index.md   | 24 +++++++
 .../usage/v8/radio/helper-error/javascript.md | 40 ++++++++++++
 static/usage/v8/radio/helper-error/react.md   | 58 +++++++++++++++++
 static/usage/v8/radio/helper-error/vue.md     | 57 +++++++++++++++++
 8 files changed, 298 insertions(+)
 create mode 100644 static/usage/v8/radio/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v8/radio/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v8/radio/helper-error/demo.html
 create mode 100644 static/usage/v8/radio/helper-error/index.md
 create mode 100644 static/usage/v8/radio/helper-error/javascript.md
 create mode 100644 static/usage/v8/radio/helper-error/react.md
 create mode 100644 static/usage/v8/radio/helper-error/vue.md

diff --git a/docs/api/radio.md b/docs/api/radio.md
index c22b839f24e..fb717c14835 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -76,6 +76,16 @@ import EmptySelection from '@site/static/usage/v8/radio/empty-selection/index.md
 
 <EmptySelection />
 
+## Helper & Error Text
+
+Helper and error text can be used inside of a radio group with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-radio-group`. This ensures errors are not shown before the user has a chance to enter data.
+
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v8/radio/helper-error/index.md';
+
+<HelperError />
+
 
 ## Theming
 
diff --git a/static/usage/v8/radio/helper-error/angular/example_component_html.md b/static/usage/v8/radio/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..87b06290e49
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <ion-radio-group
+    formControlName="favFruit"
+    helperText="Select your favorite fruit"
+    errorText="This field is required"
+  >
+    <ion-radio value="grapes">Grapes</ion-radio><br />
+    <ion-radio value="strawberries">Strawberries</ion-radio><br />
+    <ion-radio value="pineapple">Pineapple</ion-radio><br />
+    <ion-radio value="cherries">Cherries</ion-radio>
+  </ion-radio-group>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+```
diff --git a/static/usage/v8/radio/helper-error/angular/example_component_ts.md b/static/usage/v8/radio/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..463765b9cb6
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonRadioGroup, IonRadio, IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [IonRadioGroup, IonRadio, IonButton, ReactiveFormsModule],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+  myForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.myForm = this.fb.group({
+      favFruit: ['', Validators.required],
+    });
+  }
+
+  onSubmit() {
+    // Mark the control as touched to trigger the error message.
+    // This is needed if the user submits the form without interacting
+    // with the toggle.
+    this.myForm.get('favFruit')!.markAsTouched();
+  }
+}
+```
diff --git a/static/usage/v8/radio/helper-error/demo.html b/static/usage/v8/radio/helper-error/demo.html
new file mode 100644
index 00000000000..7a8d6abfccf
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/demo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-radio-group {
+        display: inline-block;
+        width: 200px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <form id="my-form">
+        <ion-radio-group helper-text="Select your favorite fruit" error-text="This field is required">
+          <ion-radio value="grapes">Grapes</ion-radio><br />
+          <ion-radio value="strawberries">Strawberries</ion-radio><br />
+          <ion-radio value="pineapple">Pineapple</ion-radio><br />
+          <ion-radio value="cherries">Cherries</ion-radio>
+        </ion-radio-group>
+
+        <br />
+
+        <ion-button type="submit" size="small">Submit</ion-button>
+      </form>
+    </div>
+
+    <script>
+      const form = document.getElementById('my-form');
+      const favFruit = form.querySelector('ion-radio-group');
+
+      form.addEventListener('submit', (event) => submit(event));
+      favFruit.addEventListener('ionChange', (event) => validateRadioGroup(event));
+
+      const validateRadioGroup = (event) => {
+        favFruit.classList.add('ion-touched');
+
+        if (!event.detail.value) {
+          favFruit.classList.add('ion-invalid');
+          favFruit.classList.remove('ion-valid');
+        } else {
+          favFruit.classList.remove('ion-invalid');
+          favFruit.classList.add('ion-valid');
+        }
+      };
+
+      const submit = (event) => {
+        event.preventDefault();
+
+        validateRadioGroup({ detail: { value: favFruit.value } });
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/radio/helper-error/index.md b/static/usage/v8/radio/helper-error/index.md
new file mode 100644
index 00000000000..d8fb76a225a
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/helper-error/demo.html"
+/>
diff --git a/static/usage/v8/radio/helper-error/javascript.md b/static/usage/v8/radio/helper-error/javascript.md
new file mode 100644
index 00000000000..64507f303fb
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/javascript.md
@@ -0,0 +1,40 @@
+```html
+<form id="my-form">
+  <ion-radio-group helper-text="Select your favorite fruit" error-text="This field is required">
+    <ion-radio value="grapes">Grapes</ion-radio><br />
+    <ion-radio value="strawberries">Strawberries</ion-radio><br />
+    <ion-radio value="pineapple">Pineapple</ion-radio><br />
+    <ion-radio value="cherries">Cherries</ion-radio>
+  </ion-radio-group>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+
+<script>
+  const form = document.getElementById('my-form');
+  const favFruit = form.querySelector('ion-radio-group');
+
+  form.addEventListener('submit', (event) => submit(event));
+  favFruit.addEventListener('ionChange', (event) => validateRadioGroup(event));
+
+  const validateRadioGroup = (event) => {
+    favFruit.classList.add('ion-touched');
+
+    if (!event.detail.value) {
+      favFruit.classList.add('ion-invalid');
+      favFruit.classList.remove('ion-valid');
+    } else {
+      favFruit.classList.remove('ion-invalid');
+      favFruit.classList.add('ion-valid');
+    }
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+
+    validateRadioGroup({ detail: { value: favFruit.value } });
+  };
+</script>
+```
diff --git a/static/usage/v8/radio/helper-error/react.md b/static/usage/v8/radio/helper-error/react.md
new file mode 100644
index 00000000000..07eabf323c3
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/react.md
@@ -0,0 +1,58 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonRadioGroup, IonRadio, IonButton, RadioGroupCustomEvent } from '@ionic/react';
+
+function Example() {
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean | undefined>();
+
+  const favFruitRef = useRef<HTMLIonRadioGroupElement>(null);
+
+  const validateRadioGroup = (event: RadioGroupCustomEvent<{ value: string }>) => {
+    setIsTouched(true);
+    setIsValid(event.detail.value ? true : false);
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (favFruitRef.current) {
+      validateRadioGroup({ detail: { value: favFruitRef.current.value } } as RadioGroupCustomEvent<{
+        value: string;
+      }>);
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={submit}>
+        <IonRadioGroup
+          ref={favFruitRef}
+          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
+            isTouched ? 'ion-touched' : ''
+          }`}
+          helperText="Select your favorite fruit"
+          errorText="This field is required"
+          onIonChange={(event) => validateRadioGroup(event)}
+        >
+          <IonRadio value="grapes">Grapes</IonRadio>
+          <br />
+          <IonRadio value="strawberries">Strawberries</IonRadio>
+          <br />
+          <IonRadio value="pineapple">Pineapple</IonRadio>
+          <br />
+          <IonRadio value="cherries">Cherries</IonRadio>
+        </IonRadioGroup>
+
+        <br />
+
+        <IonButton type="submit" size="small">
+          Submit
+        </IonButton>
+      </form>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/radio/helper-error/vue.md b/static/usage/v8/radio/helper-error/vue.md
new file mode 100644
index 00000000000..7b823c392d5
--- /dev/null
+++ b/static/usage/v8/radio/helper-error/vue.md
@@ -0,0 +1,57 @@
+```html
+<template>
+  <form @submit.prevent="submit">
+    <ion-radio-group
+      v-model="favFruit"
+      helper-text="Select your favorite fruit"
+      error-text="This field is required"
+      @ionChange="validateRadioGroup"
+      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
+    >
+      <ion-radio value="grapes">Grapes</ion-radio><br />
+      <ion-radio value="strawberries">Strawberries</ion-radio><br />
+      <ion-radio value="pineapple">Pineapple</ion-radio><br />
+      <ion-radio value="cherries">Cherries</ion-radio>
+    </ion-radio-group>
+
+    <br />
+
+    <ion-button type="submit" size="small">Submit</ion-button>
+  </form>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { IonRadioGroup, IonRadio, IonButton, RadioGroupCustomEvent } from '@ionic/vue';
+
+  export default defineComponent({
+    components: {
+      IonRadioGroup,
+      IonRadio,
+      IonButton,
+    },
+    setup() {
+      const favFruit = ref('');
+      const isTouched = ref(false);
+      const isValid = ref<boolean | undefined>();
+
+      const validateRadioGroup = (event: RadioGroupCustomEvent<{ value: string }>) => {
+        isTouched.value = true;
+        isValid.value = event.detail.value ? true : false;
+      };
+
+      const submit = () => {
+        validateRadioGroup({ detail: { value: favFruit.value } } as RadioGroupCustomEvent<{ value: string }>);
+      };
+
+      return {
+        favFruit,
+        isTouched,
+        isValid,
+        validateRadioGroup,
+        submit,
+      };
+    },
+  });
+</script>
+```

From 2d9c68256d017cd76b2866bfe1dabea5207ae782 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:08:58 -0700
Subject: [PATCH 4/6] docs(toggle): add helperText and errorText section
 (#4033)

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/toggle.md                            | 10 ++++
 .../angular/example_component_html.md         | 13 +++++
 .../angular/example_component_ts.md           | 28 +++++++++++
 static/usage/v8/toggle/helper-error/demo.html | 48 +++++++++++++++++++
 static/usage/v8/toggle/helper-error/index.md  | 24 ++++++++++
 .../v8/toggle/helper-error/javascript.md      | 28 +++++++++++
 static/usage/v8/toggle/helper-error/react.md  | 38 +++++++++++++++
 static/usage/v8/toggle/helper-error/vue.md    | 47 ++++++++++++++++++
 8 files changed, 236 insertions(+)
 create mode 100644 static/usage/v8/toggle/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/helper-error/demo.html
 create mode 100644 static/usage/v8/toggle/helper-error/index.md
 create mode 100644 static/usage/v8/toggle/helper-error/javascript.md
 create mode 100644 static/usage/v8/toggle/helper-error/react.md
 create mode 100644 static/usage/v8/toggle/helper-error/vue.md

diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index b5a489705ce..c0b7445b2ac 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -73,6 +73,16 @@ import Justify from '@site/static/usage/v8/toggle/justify/index.md';
 
 <Justify />
 
+## Helper & Error Text
+
+Helper and error text can be used inside of a toggle with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-toggle`. This ensures errors are not shown before the user has a chance to enter data.
+
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v8/toggle/helper-error/index.md';
+
+<HelperError />
+
 ## Theming
 
 ### Colors
diff --git a/static/usage/v8/toggle/helper-error/angular/example_component_html.md b/static/usage/v8/toggle/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..d5d477aa14a
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<form [formGroup]="myForm">
+  <ion-toggle
+    formControlName="wifi"
+    helperText="Enable to connect to available networks"
+    errorText="Must be enabled to access the internet"
+    justify="space-between"
+    (ionChange)="onChange()"
+  >
+    Wi-Fi
+  </ion-toggle>
+</form>
+```
diff --git a/static/usage/v8/toggle/helper-error/angular/example_component_ts.md b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..3605e2794b2
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [IonToggle, ReactiveFormsModule],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+  myForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.myForm = this.fb.group({
+      wifi: [true, Validators.requiredTrue],
+    });
+  }
+
+  onChange() {
+    // Mark the control as touched to trigger the error message
+    // without requiring the toggle to be blurred first
+    this.myForm.get('wifi')!.markAsTouched();
+  }
+}
+```
diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
new file mode 100644
index 00000000000..25c9bd8ec59
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <style>
+      ion-toggle {
+        width: 300px;
+      }
+    </style>
+
+    <div class="container">
+      <ion-toggle
+        helper-text="Enable to connect to available networks"
+        error-text="Must be enabled to access the internet"
+        checked
+      >
+        Wi-Fi
+      </ion-toggle>
+    </div>
+
+    <script>
+      const wifi = document.querySelector('ion-toggle');
+
+      wifi.addEventListener('ionChange', (event) => validateToggle(event));
+
+      const validateToggle = (event) => {
+        wifi.classList.add('ion-touched');
+
+        if (!event.detail.checked) {
+          wifi.classList.add('ion-invalid');
+          wifi.classList.remove('ion-valid');
+        } else {
+          wifi.classList.remove('ion-invalid');
+          wifi.classList.add('ion-valid');
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/toggle/helper-error/index.md b/static/usage/v8/toggle/helper-error/index.md
new file mode 100644
index 00000000000..a7b0d15d25d
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/helper-error/demo.html"
+/>
diff --git a/static/usage/v8/toggle/helper-error/javascript.md b/static/usage/v8/toggle/helper-error/javascript.md
new file mode 100644
index 00000000000..a4eb832ef06
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/javascript.md
@@ -0,0 +1,28 @@
+```html
+<ion-toggle
+  helper-text="Enable to connect to available networks"
+  error-text="Must be enabled to access the internet"
+  justify="space-between"
+  checked
+>
+  Wi-Fi
+</ion-toggle>
+
+<script>
+  const wifi = document.querySelector('ion-toggle');
+
+  wifi.addEventListener('ionChange', (event) => validateToggle(event));
+
+  const validateToggle = (event) => {
+    wifi.classList.add('ion-touched');
+
+    if (!event.detail.checked) {
+      wifi.classList.add('ion-invalid');
+      wifi.classList.remove('ion-valid');
+    } else {
+      wifi.classList.remove('ion-invalid');
+      wifi.classList.add('ion-valid');
+    }
+  };
+</script>
+```
diff --git a/static/usage/v8/toggle/helper-error/react.md b/static/usage/v8/toggle/helper-error/react.md
new file mode 100644
index 00000000000..926a0bd0d2e
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonToggle, ToggleCustomEvent } from '@ionic/react';
+
+function Example() {
+  const wifiRef = useRef<HTMLIonToggleElement>(null);
+
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean | undefined>();
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+    setIsTouched(true);
+    setIsChecked(event.detail.checked);
+    setIsValid(event.detail.checked);
+  };
+
+  return (
+    <>
+      <IonToggle
+        ref={wifiRef}
+        className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
+          isTouched ? 'ion-touched' : ''
+        }`}
+        helperText="Enable to connect to available networks"
+        errorText="Must be enabled to access the internet"
+        justify="space-between"
+        checked={isChecked}
+        onIonChange={(event) => validateToggle(event)}
+      >
+        Wi-Fi
+      </IonToggle>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/toggle/helper-error/vue.md b/static/usage/v8/toggle/helper-error/vue.md
new file mode 100644
index 00000000000..55a87adc295
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/vue.md
@@ -0,0 +1,47 @@
+```html
+<template>
+  <ion-toggle
+    v-model="wifi"
+    helper-text="Enable to connect to available networks"
+    error-text="Must be enabled to access the internet"
+    justify="space-between"
+    @ionChange="validateToggle"
+    :class="{
+      'ion-valid': isValid,
+      'ion-invalid': isValid === false,
+      'ion-touched': isTouched,
+    }"
+  >
+    Wi-Fi
+  </ion-toggle>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue';
+
+  export default defineComponent({
+    components: {
+      IonToggle,
+      IonButton,
+    },
+    setup() {
+      const wifi = ref(true);
+      const isTouched = ref(false);
+      const isValid = ref<boolean | undefined>();
+
+      const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+        isTouched.value = true;
+        isValid.value = event.detail.checked;
+      };
+
+      return {
+        wifi,
+        isTouched,
+        isValid,
+        validateToggle,
+      };
+    },
+  });
+</script>
+```

From c0b9336e9eddfbec68f12f965ee6c333b718e964 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:09:17 -0700
Subject: [PATCH 5/6] docs(select): add helperText and errorText section
 (#4029)

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/select.md                            | 10 +++
 .../angular/example_component_html.md         | 19 +++++
 .../angular/example_component_ts.md           | 29 ++++++++
 static/usage/v8/select/helper-error/demo.html | 68 ++++++++++++++++++
 static/usage/v8/select/helper-error/index.md  | 25 +++++++
 .../v8/select/helper-error/javascript.md      | 53 ++++++++++++++
 static/usage/v8/select/helper-error/react.md  | 72 +++++++++++++++++++
 static/usage/v8/select/helper-error/vue.md    | 68 ++++++++++++++++++
 8 files changed, 344 insertions(+)
 create mode 100644 static/usage/v8/select/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/helper-error/demo.html
 create mode 100644 static/usage/v8/select/helper-error/index.md
 create mode 100644 static/usage/v8/select/helper-error/javascript.md
 create mode 100644 static/usage/v8/select/helper-error/react.md
 create mode 100644 static/usage/v8/select/helper-error/vue.md

diff --git a/docs/api/select.md b/docs/api/select.md
index 8a310608fce..0642c6e701d 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -253,6 +253,16 @@ import TypeaheadExample from '@site/static/usage/v8/select/typeahead/index.md';
 
 <TypeaheadExample />
 
+## Helper & Error Text
+
+Helper and error text can be used inside of a select with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-select`. This ensures errors are not shown before the user has a chance to enter data.
+
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v8/select/helper-error/index.md';
+
+<HelperError />
+
 ## Interfaces
 
 ### SelectChangeEventDetail
diff --git a/static/usage/v8/select/helper-error/angular/example_component_html.md b/static/usage/v8/select/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..0e65b13e6fe
--- /dev/null
+++ b/static/usage/v8/select/helper-error/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <ion-select
+    formControlName="favFruit"
+    label="Favorite fruit"
+    placeholder="Select fruit"
+    helperText="Select your favorite fruit"
+    errorText="This field is required"
+  >
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+```
diff --git a/static/usage/v8/select/helper-error/angular/example_component_ts.md b/static/usage/v8/select/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..6ac0561c716
--- /dev/null
+++ b/static/usage/v8/select/helper-error/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonSelect, IonSelectOption, IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [IonSelect, IonSelectOption, IonButton, ReactiveFormsModule],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+  myForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.myForm = this.fb.group({
+      favFruit: ['', Validators.required],
+    });
+  }
+
+  onSubmit() {
+    // Mark the control as touched to trigger the error message.
+    // This is needed if the user submits the form without interacting
+    // with the select.
+    this.myForm.get('favFruit')!.markAsTouched();
+  }
+}
+```
diff --git a/static/usage/v8/select/helper-error/demo.html b/static/usage/v8/select/helper-error/demo.html
new file mode 100644
index 00000000000..1d3a8647b97
--- /dev/null
+++ b/static/usage/v8/select/helper-error/demo.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <form id="my-form">
+        <ion-select
+          label="Favorite fruit"
+          placeholder="Select fruit"
+          helper-text="Select your favorite fruit"
+          error-text="This field is required"
+        >
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+          <ion-select-option value="orange">Orange</ion-select-option>
+        </ion-select>
+
+        <br />
+
+        <ion-button type="submit" size="small">Submit</ion-button>
+      </form>
+    </div>
+
+    <script>
+      const form = document.getElementById('my-form');
+      const favFruit = form.querySelector('ion-select');
+
+      form.addEventListener('submit', (event) => submit(event));
+      favFruit.addEventListener('ionChange', (event) => validateSelect(event));
+      favFruit.addEventListener('ionBlur', () => onIonBlur({ detail: { value: favFruit.value } }));
+
+      const validateSelect = (event) => {
+        if (!event.detail.value) {
+          favFruit.classList.add('ion-invalid');
+          favFruit.classList.remove('ion-valid');
+        } else {
+          favFruit.classList.remove('ion-invalid');
+          favFruit.classList.add('ion-valid');
+        }
+      };
+
+      const markTouched = () => {
+        favFruit.classList.add('ion-touched');
+      };
+
+      const onIonBlur = (event) => {
+        markTouched();
+        validateSelect(event);
+      };
+
+      const submit = (event) => {
+        event.preventDefault();
+
+        markTouched();
+        validateSelect({ detail: { value: favFruit.value } });
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/select/helper-error/index.md b/static/usage/v8/select/helper-error/index.md
new file mode 100644
index 00000000000..6de3b40d644
--- /dev/null
+++ b/static/usage/v8/select/helper-error/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  size="300px"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/select/helper-error/demo.html"
+/>
diff --git a/static/usage/v8/select/helper-error/javascript.md b/static/usage/v8/select/helper-error/javascript.md
new file mode 100644
index 00000000000..41e595a05cf
--- /dev/null
+++ b/static/usage/v8/select/helper-error/javascript.md
@@ -0,0 +1,53 @@
+```html
+<form id="my-form">
+  <ion-select
+    label="Favorite fruit"
+    placeholder="Select fruit"
+    helper-text="Select your favorite fruit"
+    error-text="This field is required"
+  >
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+
+<script>
+  const form = document.getElementById('my-form');
+  const favFruit = form.querySelector('ion-select');
+
+  form.addEventListener('submit', (event) => submit(event));
+  favFruit.addEventListener('ionChange', (event) => validateSelect(event));
+  favFruit.addEventListener('ionBlur', () => onIonBlur({ detail: { value: favFruit.value } }));
+
+  const validateSelect = (event) => {
+    if (!event.detail.value) {
+      favFruit.classList.add('ion-invalid');
+      favFruit.classList.remove('ion-valid');
+    } else {
+      favFruit.classList.remove('ion-invalid');
+      favFruit.classList.add('ion-valid');
+    }
+  };
+
+  const markTouched = () => {
+    favFruit.classList.add('ion-touched');
+  };
+
+  const onIonBlur = (event) => {
+    markTouched();
+    validateSelect(event);
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+
+    markTouched();
+    validateSelect({ detail: { value: favFruit.value } });
+  };
+</script>
+```
diff --git a/static/usage/v8/select/helper-error/react.md b/static/usage/v8/select/helper-error/react.md
new file mode 100644
index 00000000000..b8c4cd16904
--- /dev/null
+++ b/static/usage/v8/select/helper-error/react.md
@@ -0,0 +1,72 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonSelect, IonSelectOption, IonButton, SelectCustomEvent } from '@ionic/react';
+
+function Example() {
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean | undefined>();
+
+  const favFruitRef = useRef<HTMLIonSelectElement>(null);
+
+  const validateSelect = (event: SelectCustomEvent<{ value: string }>) => {
+    setIsValid(event.detail.value ? true : false);
+  };
+
+  const markTouched = () => {
+    setIsTouched(true);
+  };
+
+  const onIonBlur = () => {
+    markTouched();
+
+    if (favFruitRef.current) {
+      validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{
+        value: string;
+      }>);
+    }
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    markTouched();
+
+    if (favFruitRef.current) {
+      validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{
+        value: string;
+      }>);
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={submit}>
+        <IonSelect
+          ref={favFruitRef}
+          label="Favorite fruit"
+          placeholder="Select fruit"
+          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
+            isTouched ? 'ion-touched' : ''
+          }`}
+          helperText="Select your favorite fruit"
+          errorText="This field is required"
+          onIonChange={(event) => validateSelect(event)}
+          onIonBlur={onIonBlur}
+        >
+          <IonSelectOption value="apple">Apple</IonSelectOption>
+          <IonSelectOption value="banana">Banana</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+        </IonSelect>
+
+        <br />
+
+        <IonButton type="submit" size="small">
+          Submit
+        </IonButton>
+      </form>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/select/helper-error/vue.md b/static/usage/v8/select/helper-error/vue.md
new file mode 100644
index 00000000000..83a477e922b
--- /dev/null
+++ b/static/usage/v8/select/helper-error/vue.md
@@ -0,0 +1,68 @@
+```html
+<template>
+  <form @submit.prevent="submit">
+    <ion-select
+      v-model="favFruit"
+      label="Favorite fruit"
+      placeholder="Select fruit"
+      helper-text="Select your favorite fruit"
+      error-text="This field is required"
+      @ionChange="validateSelect"
+      @ionBlur="onIonBlur"
+      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
+    >
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+
+    <br />
+
+    <ion-button type="submit" size="small">Submit</ion-button>
+  </form>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { IonSelect, IonSelectOption, IonButton, SelectCustomEvent } from '@ionic/vue';
+
+  export default defineComponent({
+    components: {
+      IonSelect,
+      IonSelectOption,
+      IonButton,
+    },
+    setup() {
+      const favFruit = ref('');
+      const isTouched = ref(false);
+      const isValid = ref<boolean | undefined>();
+
+      const validateSelect = (event: SelectCustomEvent<{ value: string }>) => {
+        isValid.value = event.detail.value ? true : false;
+      };
+
+      const markTouched = () => {
+        isTouched.value = true;
+      };
+
+      const onIonBlur = () => {
+        markTouched();
+        validateSelect({ detail: { value: favFruit.value } } as SelectCustomEvent<{ value: string }>);
+      };
+
+      const submit = () => {
+        markTouched();
+        validateSelect({ detail: { value: favFruit.value } } as SelectCustomEvent<{ value: string }>);
+      };
+
+      return {
+        favFruit,
+        isTouched,
+        isValid,
+        validateSelect,
+        submit,
+      };
+    },
+  });
+</script>
+```

From 0ba7b74bb82437a21b02ef90a43841d60769e38c Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:09:34 -0700
Subject: [PATCH 6/6] docs(checkbox): add helperText and errorText section
 (#4028)

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 docs/api/checkbox.md                          | 10 ++++
 .../angular/example_component_html.md         | 15 +++++
 .../angular/example_component_ts.md           | 29 ++++++++++
 .../usage/v8/checkbox/helper-error/demo.html  | 55 +++++++++++++++++++
 .../usage/v8/checkbox/helper-error/index.md   | 24 ++++++++
 .../v8/checkbox/helper-error/javascript.md    | 37 +++++++++++++
 .../usage/v8/checkbox/helper-error/react.md   | 52 ++++++++++++++++++
 static/usage/v8/checkbox/helper-error/vue.md  | 53 ++++++++++++++++++
 8 files changed, 275 insertions(+)
 create mode 100644 static/usage/v8/checkbox/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v8/checkbox/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v8/checkbox/helper-error/demo.html
 create mode 100644 static/usage/v8/checkbox/helper-error/index.md
 create mode 100644 static/usage/v8/checkbox/helper-error/javascript.md
 create mode 100644 static/usage/v8/checkbox/helper-error/react.md
 create mode 100644 static/usage/v8/checkbox/helper-error/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 900f827e237..a7b733f201d 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -74,6 +74,16 @@ import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md';
 
 <LabelLink />
 
+## Helper & Error Text
+
+Helper and error text can be used inside of a checkbox with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-checkbox`. This ensures errors are not shown before the user has a chance to enter data.
+
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md';
+
+<HelperError />
+
 ## Theming
 
 ### CSS Custom Properties
diff --git a/static/usage/v8/checkbox/helper-error/angular/example_component_html.md b/static/usage/v8/checkbox/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..7153841ac36
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <ion-checkbox
+    formControlName="agree"
+    helperText="Agree to the terms before continuing"
+    errorText="You must agree to the terms to continue"
+  >
+    I agree to the terms and conditions
+  </ion-checkbox>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+```
diff --git a/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md b/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8611d00de6
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { IonCheckbox, IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [IonCheckbox, IonButton, ReactiveFormsModule],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+  myForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.myForm = this.fb.group({
+      agree: [false, Validators.requiredTrue],
+    });
+  }
+
+  onSubmit() {
+    // Mark the control as touched to trigger the error message.
+    // This is needed if the user submits the form without interacting
+    // with the checkbox.
+    this.myForm.get('agree')!.markAsTouched();
+  }
+}
+```
diff --git a/static/usage/v8/checkbox/helper-error/demo.html b/static/usage/v8/checkbox/helper-error/demo.html
new file mode 100644
index 00000000000..f16fd9b8503
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <form id="my-form">
+        <ion-checkbox
+          helper-text="Agree to the terms before continuing"
+          error-text="You must agree to the terms to continue"
+        >
+          I agree to the terms and conditions
+        </ion-checkbox>
+
+        <br />
+
+        <ion-button type="submit" size="small">Submit</ion-button>
+      </form>
+    </div>
+
+    <script>
+      const form = document.getElementById('my-form');
+      const agree = form.querySelector('ion-checkbox');
+
+      form.addEventListener('submit', (event) => submit(event));
+      agree.addEventListener('ionChange', (event) => validateCheckbox(event));
+
+      const validateCheckbox = (event) => {
+        agree.classList.add('ion-touched');
+
+        if (!event.detail.checked) {
+          agree.classList.add('ion-invalid');
+          agree.classList.remove('ion-valid');
+        } else {
+          agree.classList.remove('ion-invalid');
+          agree.classList.add('ion-valid');
+        }
+      };
+
+      const submit = (event) => {
+        event.preventDefault();
+
+        validateCheckbox({ detail: { checked: agree.checked } });
+      };
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/checkbox/helper-error/index.md b/static/usage/v8/checkbox/helper-error/index.md
new file mode 100644
index 00000000000..8a49f53d9c8
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/checkbox/helper-error/demo.html"
+/>
diff --git a/static/usage/v8/checkbox/helper-error/javascript.md b/static/usage/v8/checkbox/helper-error/javascript.md
new file mode 100644
index 00000000000..0f7d8901ae2
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/javascript.md
@@ -0,0 +1,37 @@
+```html
+<form id="my-form">
+  <ion-checkbox helper-text="Agree to the terms before continuing" error-text="You must agree to the terms to continue">
+    I agree to the terms and conditions
+  </ion-checkbox>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+
+<script>
+  const form = document.getElementById('my-form');
+  const agree = form.querySelector('ion-checkbox');
+
+  form.addEventListener('submit', (event) => submit(event));
+  agree.addEventListener('ionChange', (event) => validateCheckbox(event));
+
+  const validateCheckbox = (event) => {
+    agree.classList.add('ion-touched');
+
+    if (!event.detail.checked) {
+      agree.classList.add('ion-invalid');
+      agree.classList.remove('ion-valid');
+    } else {
+      agree.classList.remove('ion-invalid');
+      agree.classList.add('ion-valid');
+    }
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+
+    validateCheckbox({ detail: { checked: agree.checked } });
+  };
+</script>
+```
diff --git a/static/usage/v8/checkbox/helper-error/react.md b/static/usage/v8/checkbox/helper-error/react.md
new file mode 100644
index 00000000000..7c861fce639
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonCheckbox, IonButton, CheckboxCustomEvent } from '@ionic/react';
+
+function Example() {
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean | undefined>();
+
+  const agreeRef = useRef<HTMLIonCheckboxElement>(null);
+
+  const validateCheckbox = (event: CheckboxCustomEvent<{ checked: boolean }>) => {
+    setIsTouched(true);
+    setIsValid(event.detail.checked);
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (agreeRef.current) {
+      validateCheckbox({ detail: { checked: agreeRef.current.checked } } as CheckboxCustomEvent<{
+        checked: boolean;
+      }>);
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={submit}>
+        <IonCheckbox
+          ref={agreeRef}
+          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
+            isTouched ? 'ion-touched' : ''
+          }`}
+          helperText="Agree to the terms before continuing"
+          errorText="You must agree to the terms to continue"
+          onIonChange={(event) => validateCheckbox(event)}
+        >
+          I agree to the terms and conditions
+        </IonCheckbox>
+
+        <br />
+
+        <IonButton type="submit" size="small">
+          Submit
+        </IonButton>
+      </form>
+    </>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/helper-error/vue.md b/static/usage/v8/checkbox/helper-error/vue.md
new file mode 100644
index 00000000000..46b554c9553
--- /dev/null
+++ b/static/usage/v8/checkbox/helper-error/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <form @submit.prevent="submit">
+    <ion-checkbox
+      v-model="agree"
+      helper-text="Agree to the terms before continuing"
+      error-text="You must agree to the terms to continue"
+      @ionChange="validateCheckbox"
+      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
+    >
+      I agree to the terms and conditions
+    </ion-checkbox>
+
+    <br />
+
+    <ion-button type="submit" size="small">Submit</ion-button>
+  </form>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { IonCheckbox, IonButton, CheckboxCustomEvent } from '@ionic/vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonButton,
+    },
+    setup() {
+      const agree = ref(false);
+      const isTouched = ref(false);
+      const isValid = ref<boolean | undefined>();
+
+      const validateCheckbox = (event: CheckboxCustomEvent<{ checked: boolean }>) => {
+        isTouched.value = true;
+        isValid.value = event.detail.checked;
+      };
+
+      const submit = () => {
+        validateCheckbox({ detail: { checked: agree.value } } as CheckboxCustomEvent<{ checked: boolean }>);
+      };
+
+      return {
+        agree,
+        isTouched,
+        isValid,
+        validateCheckbox,
+        submit,
+      };
+    },
+  });
+</script>
+```