From def00f63658f0627a66a909b703ec3cbd6331b4f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 10 Mar 2025 11:15:45 -0700
Subject: [PATCH 01/12] docs(toggle): add helperText and errorText section

---
 docs/api/toggle.md                            | 10 ++++
 .../angular/example_component_html.md         | 11 ++++
 .../angular/example_component_ts.md           | 29 ++++++++++
 static/usage/v8/toggle/helper-error/demo.html | 58 +++++++++++++++++++
 static/usage/v8/toggle/helper-error/index.md  | 24 ++++++++
 .../v8/toggle/helper-error/javascript.md      | 37 ++++++++++++
 static/usage/v8/toggle/helper-error/react.md  | 52 +++++++++++++++++
 static/usage/v8/toggle/helper-error/vue.md    | 53 +++++++++++++++++
 8 files changed, 274 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 b5a489705c..c0b7445b2a 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 0000000000..bbb89d164d
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <ion-toggle formControlName="wifi" helperText="This needs to be enabled" errorText="This field is required">
+    Wi-Fi
+  </ion-toggle>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</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 0000000000..aba43944e8
--- /dev/null
+++ b/static/usage/v8/toggle/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 { IonToggle, IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [IonToggle, IonButton, ReactiveFormsModule],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {
+  myForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.myForm = this.fb.group({
+      wifi: [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 toggle.
+    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 0000000000..5b25bf7d6f
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -0,0 +1,58 @@
+<!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-toggle helper-text="This needs to be enabled" error-text="This field is required">
+          Wi-Fi
+        </ion-toggle>
+
+        <br />
+
+        <ion-button type="submit" size="small">Submit</ion-button>
+      </form>
+    </div>
+
+    <script>
+      const form = document.getElementById('my-form');
+      const wifi = form.querySelector('ion-toggle');
+
+      form.addEventListener('submit', (event) => submit(event));
+      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');
+        }
+      };
+
+      const submit = (event) => {
+        event.preventDefault();
+
+        validateToggle({ detail: { checked: wifi.checked } });
+      };
+    </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 0000000000..a7b0d15d25
--- /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 0000000000..60d38747bd
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/javascript.md
@@ -0,0 +1,37 @@
+```html
+<form id="my-form">
+  <ion-toggle helper-text="This needs to be enabled" error-text="This field is required">
+    Wi-Fi
+  </ion-toggle>
+
+  <br />
+
+  <ion-button type="submit" size="small">Submit</ion-button>
+</form>
+
+<script>
+  const form = document.getElementById('my-form');
+  const wifi = form.querySelector('ion-toggle');
+
+  form.addEventListener('submit', (event) => submit(event));
+  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');
+    }
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+
+    validateToggle({ detail: { checked: wifi.checked } });
+  };
+</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 0000000000..370b691d12
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/react';
+
+function Example() {
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean | undefined>();
+
+  const wifiRef = useRef<HTMLIonToggleElement>(null);
+
+  const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+    setIsTouched(true);
+    setIsValid(event.detail.checked);
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (wifiRef.current) {
+      validateToggle({ detail: { checked: wifiRef.current.checked } } as ToggleCustomEvent<{
+        checked: boolean;
+      }>);
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={submit}>
+        <IonToggle
+          ref={wifiRef}
+          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
+            isTouched ? 'ion-touched' : ''
+          }`}
+          helperText="This needs to be enabled"
+          errorText="This field is required"
+          onIonChange={(event) => validateToggle(event)}
+        >
+          I agree to the terms and conditions
+        </IonToggle>
+
+        <br />
+
+        <IonButton type="submit" size="small">
+          Submit
+        </IonButton>
+      </form>
+    </>
+  );
+}
+
+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 0000000000..213b945d31
--- /dev/null
+++ b/static/usage/v8/toggle/helper-error/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <form @submit.prevent="submit">
+    <ion-toggle
+      v-model="wifi"
+      helper-text="This needs to be enabled"
+      error-text="This field is required"
+      @ionChange="validateToggle"
+      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
+    >
+      Wi-Fi
+    </ion-toggle>
+
+    <br />
+
+    <ion-button type="submit" size="small">Submit</ion-button>
+  </form>
+</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(false);
+      const isTouched = ref(false);
+      const isValid = ref<boolean | undefined>();
+
+      const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+        isTouched.value = true;
+        isValid.value = event.detail.checked;
+      };
+
+      const submit = () => {
+        validateToggle({ detail: { checked: wifi.value } } as ToggleCustomEvent<{ checked: boolean }>);
+      };
+
+      return {
+        wifi,
+        isTouched,
+        isValid,
+        validateToggle,
+        submit,
+      };
+    },
+  });
+</script>
+```

From 74feb87a31acc3521d50f92e476b196644d0aa6c Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 10 Mar 2025 11:22:07 -0700
Subject: [PATCH 02/12] chore(toggle): run lint

---
 static/usage/v8/toggle/helper-error/demo.html     | 14 +++-----------
 static/usage/v8/toggle/helper-error/javascript.md |  4 +---
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
index 5b25bf7d6f..b0ae822d0a 100644
--- a/static/usage/v8/toggle/helper-error/demo.html
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -6,22 +6,14 @@
     <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"
-    />
+    <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-toggle helper-text="This needs to be enabled" error-text="This field is required">
-          Wi-Fi
-        </ion-toggle>
+        <ion-toggle helper-text="This needs to be enabled" error-text="This field is required"> Wi-Fi </ion-toggle>
 
         <br />
 
diff --git a/static/usage/v8/toggle/helper-error/javascript.md b/static/usage/v8/toggle/helper-error/javascript.md
index 60d38747bd..dff9decdc0 100644
--- a/static/usage/v8/toggle/helper-error/javascript.md
+++ b/static/usage/v8/toggle/helper-error/javascript.md
@@ -1,8 +1,6 @@
 ```html
 <form id="my-form">
-  <ion-toggle helper-text="This needs to be enabled" error-text="This field is required">
-    Wi-Fi
-  </ion-toggle>
+  <ion-toggle helper-text="This needs to be enabled" error-text="This field is required"> Wi-Fi </ion-toggle>
 
   <br />
 

From b741840513c6a9591b713bebd2afc86f40c44b68 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 10 Mar 2025 11:35:12 -0700
Subject: [PATCH 03/12] chore(toggle): use dev build

---
 static/code/stackblitz/v8/angular/package.json |  4 ++--
 static/code/stackblitz/v8/html/package.json    |  2 +-
 static/code/stackblitz/v8/react/package.json   |  4 ++--
 static/code/stackblitz/v8/vue/package.json     |  4 ++--
 static/usage/v8/toggle/helper-error/demo.html  | 10 ++++++++--
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index b0c78d7f46..e718ff50c2 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ionic/angular": "^8.0.0",
-    "@ionic/core": "^8.0.0",
+    "@ionic/angular": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/core": "8.4.4-dev.11741630999.189d7fc2",
     "ionicons": "7.4.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index 422f9a91f5..90a083f37c 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/core": "8.4.1",
+    "@ionic/core": "8.4.4-dev.11741630999.189d7fc2",
     "ionicons": "7.4.0"
   }
 }
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index c0803683c6..2c15fac4ec 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.4.1",
-    "@ionic/react-router": "8.4.1",
+    "@ionic/react": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/react-router": "8.4.4-dev.11741630999.189d7fc2",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index b9394bad9d..40fc59723c 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.4.1",
-    "@ionic/vue-router": "8.4.1",
+    "@ionic/vue": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/vue-router": "8.4.4-dev.11741630999.189d7fc2",
     "vue": "^3.2.25",
     "vue-router": "4.5.0"
   },
diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
index b0ae822d0a..51a822cbc0 100644
--- a/static/usage/v8/toggle/helper-error/demo.html
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -6,8 +6,14 @@
     <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" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.4.4-dev.11741630999.189d7fc2/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.4.4-dev.11741630999.189d7fc2/css/ionic.bundle.css"
+    />
   </head>
 
   <body>

From 927c64f7da57e003e58572ac2fab8ecad1b23027 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:27:33 -0700
Subject: [PATCH 04/12] Update static/usage/v8/toggle/helper-error/demo.html

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 static/usage/v8/toggle/helper-error/demo.html | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
index 51a822cbc0..bab4a00be9 100644
--- a/static/usage/v8/toggle/helper-error/demo.html
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -17,21 +17,19 @@
   </head>
 
   <body>
-    <div class="container">
-      <form id="my-form">
-        <ion-toggle helper-text="This needs to be enabled" error-text="This field is required"> Wi-Fi </ion-toggle>
-
-        <br />
+    <style>
+      ion-toggle {
+        width: 300px;
+      }
+    </style>
 
-        <ion-button type="submit" size="small">Submit</ion-button>
-      </form>
+    <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 form = document.getElementById('my-form');
-      const wifi = form.querySelector('ion-toggle');
+      const wifi = document.querySelector('ion-toggle');
 
-      form.addEventListener('submit', (event) => submit(event));
       wifi.addEventListener('ionChange', (event) => validateToggle(event));
 
       const validateToggle = (event) => {
@@ -45,12 +43,6 @@
           wifi.classList.add('ion-valid');
         }
       };
-
-      const submit = (event) => {
-        event.preventDefault();
-
-        validateToggle({ detail: { checked: wifi.checked } });
-      };
     </script>
   </body>
 </html>

From 1510b82275724cc1dafa24b465029896a6c2477c Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:27:41 -0700
Subject: [PATCH 05/12] Update
 static/usage/v8/toggle/helper-error/javascript.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 .../usage/v8/toggle/helper-error/javascript.md | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/static/usage/v8/toggle/helper-error/javascript.md b/static/usage/v8/toggle/helper-error/javascript.md
index dff9decdc0..4763d4c88a 100644
--- a/static/usage/v8/toggle/helper-error/javascript.md
+++ b/static/usage/v8/toggle/helper-error/javascript.md
@@ -1,17 +1,9 @@
 ```html
-<form id="my-form">
-  <ion-toggle helper-text="This needs to be enabled" error-text="This field is required"> Wi-Fi </ion-toggle>
-
-  <br />
-
-  <ion-button type="submit" size="small">Submit</ion-button>
-</form>
+<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 form = document.getElementById('my-form');
-  const wifi = form.querySelector('ion-toggle');
+  const wifi = document.querySelector('ion-toggle');
 
-  form.addEventListener('submit', (event) => submit(event));
   wifi.addEventListener('ionChange', (event) => validateToggle(event));
 
   const validateToggle = (event) => {
@@ -25,11 +17,5 @@
       wifi.classList.add('ion-valid');
     }
   };
-
-  const submit = (event) => {
-    event.preventDefault();
-
-    validateToggle({ detail: { checked: wifi.checked } });
-  };
 </script>
 ```

From 1842e6e099ee0011241ba32a72cce9cbcf672175 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:28:06 -0700
Subject: [PATCH 06/12] Update static/usage/v8/toggle/helper-error/react.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 static/usage/v8/toggle/helper-error/react.md | 50 +++++++-------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/static/usage/v8/toggle/helper-error/react.md b/static/usage/v8/toggle/helper-error/react.md
index 370b691d12..8242550522 100644
--- a/static/usage/v8/toggle/helper-error/react.md
+++ b/static/usage/v8/toggle/helper-error/react.md
@@ -1,49 +1,35 @@
 ```tsx
 import React, { useRef, useState } from 'react';
-import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/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 wifiRef = useRef<HTMLIonToggleElement>(null);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
     setIsTouched(true);
+    setIsChecked(event.detail.checked);
     setIsValid(event.detail.checked);
   };
 
-  const submit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (wifiRef.current) {
-      validateToggle({ detail: { checked: wifiRef.current.checked } } as ToggleCustomEvent<{
-        checked: boolean;
-      }>);
-    }
-  };
-
   return (
     <>
-      <form onSubmit={submit}>
-        <IonToggle
-          ref={wifiRef}
-          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
-            isTouched ? 'ion-touched' : ''
-          }`}
-          helperText="This needs to be enabled"
-          errorText="This field is required"
-          onIonChange={(event) => validateToggle(event)}
-        >
-          I agree to the terms and conditions
-        </IonToggle>
-
-        <br />
-
-        <IonButton type="submit" size="small">
-          Submit
-        </IonButton>
-      </form>
+      <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)}
+      >
+        I agree to the terms and conditions
+      </IonToggle>
     </>
   );
 }

From ec266bef6bc6053263778839257cb328d9873e05 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:28:16 -0700
Subject: [PATCH 07/12] Update static/usage/v8/toggle/helper-error/vue.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 static/usage/v8/toggle/helper-error/vue.md | 80 ++++++++++------------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/static/usage/v8/toggle/helper-error/vue.md b/static/usage/v8/toggle/helper-error/vue.md
index 213b945d31..febac4cde0 100644
--- a/static/usage/v8/toggle/helper-error/vue.md
+++ b/static/usage/v8/toggle/helper-error/vue.md
@@ -1,53 +1,47 @@
 ```html
 <template>
-  <form @submit.prevent="submit">
-    <ion-toggle
-      v-model="wifi"
-      helper-text="This needs to be enabled"
-      error-text="This field is required"
-      @ionChange="validateToggle"
-      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
-    >
-      Wi-Fi
-    </ion-toggle>
-
-    <br />
-
-    <ion-button type="submit" size="small">Submit</ion-button>
-  </form>
+  <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(false);
-      const isTouched = ref(false);
-      const isValid = ref<boolean | undefined>();
+import { defineComponent, ref } from 'vue';
+import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue';
 
-      const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
-        isTouched.value = true;
-        isValid.value = event.detail.checked;
-      };
+export default defineComponent({
+  components: {
+    IonToggle,
+    IonButton,
+  },
+  setup() {
+    const wifi = ref(true);
+    const isTouched = ref(false);
+    const isValid = ref<boolean | undefined>();
 
-      const submit = () => {
-        validateToggle({ detail: { checked: wifi.value } } as ToggleCustomEvent<{ checked: boolean }>);
-      };
+    const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+      isTouched.value = true;
+      isValid.value = event.detail.checked;
+    };
 
-      return {
-        wifi,
-        isTouched,
-        isValid,
-        validateToggle,
-        submit,
-      };
-    },
-  });
+    return {
+      wifi,
+      isTouched,
+      isValid,
+      validateToggle,
+    };
+  },
+});
 </script>
 ```

From 46dbaefd83ee45b4792aaa62e63719ccf16d0dc0 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:28:47 -0700
Subject: [PATCH 08/12] Update
 static/usage/v8/toggle/helper-error/angular/example_component_html.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 .../helper-error/angular/example_component_html.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

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
index bbb89d164d..d5d477aa14 100644
--- a/static/usage/v8/toggle/helper-error/angular/example_component_html.md
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_html.md
@@ -1,11 +1,13 @@
 ```html
-<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
-  <ion-toggle formControlName="wifi" helperText="This needs to be enabled" errorText="This field is required">
+<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>
-
-  <br />
-
-  <ion-button type="submit" size="small">Submit</ion-button>
 </form>
 ```

From 1db35beb865722e3886d1b43344089fe1ea8373d Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:28:54 -0700
Subject: [PATCH 09/12] Update
 static/usage/v8/toggle/helper-error/angular/example_component_ts.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
---
 .../angular/example_component_ts.md           | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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
index aba43944e8..1f17ce8072 100644
--- a/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
@@ -1,12 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { IonToggle, IonButton } from '@ionic/angular/standalone';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { IonToggle } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   standalone: true,
-  imports: [IonToggle, IonButton, ReactiveFormsModule],
+  imports: [IonToggle, ReactiveFormsModule],
   templateUrl: './example.component.html',
   styleUrl: './example.component.css',
 })
@@ -15,14 +20,13 @@ export class ExampleComponent {
 
   constructor(private fb: FormBuilder) {
     this.myForm = this.fb.group({
-      wifi: [false, Validators.requiredTrue],
+      wifi: [true, 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 toggle.
+  onChange() {
+    // Mark the control as touched to trigger the error message
+    // without requiring the toggle to be blurred first
     this.myForm.get('wifi')!.markAsTouched();
   }
 }

From e36e941380f6c9bc8fdcc4ce30ba2d6c7cc88d31 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 11:29:15 -0700
Subject: [PATCH 10/12] chore(toggle): run lint

---
 .../angular/example_component_ts.md           |  7 +--
 static/usage/v8/toggle/helper-error/demo.html |  8 +++-
 .../v8/toggle/helper-error/javascript.md      |  9 +++-
 static/usage/v8/toggle/helper-error/react.md  |  6 +--
 static/usage/v8/toggle/helper-error/vue.md    | 46 +++++++++----------
 5 files changed, 42 insertions(+), 34 deletions(-)

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
index 1f17ce8072..3605e2794b 100644
--- a/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md
@@ -1,11 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import {
-  FormBuilder,
-  FormGroup,
-  Validators,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { IonToggle } from '@ionic/angular/standalone';
 
 @Component({
diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
index bab4a00be9..c46c7e94d7 100644
--- a/static/usage/v8/toggle/helper-error/demo.html
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -24,7 +24,13 @@
     </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>
+      <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>
diff --git a/static/usage/v8/toggle/helper-error/javascript.md b/static/usage/v8/toggle/helper-error/javascript.md
index 4763d4c88a..a4eb832ef0 100644
--- a/static/usage/v8/toggle/helper-error/javascript.md
+++ b/static/usage/v8/toggle/helper-error/javascript.md
@@ -1,5 +1,12 @@
 ```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>
+<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');
diff --git a/static/usage/v8/toggle/helper-error/react.md b/static/usage/v8/toggle/helper-error/react.md
index 8242550522..08db95cfd8 100644
--- a/static/usage/v8/toggle/helper-error/react.md
+++ b/static/usage/v8/toggle/helper-error/react.md
@@ -19,9 +19,9 @@ function Example() {
     <>
       <IonToggle
         ref={wifiRef}
-        className={`${isValid ? 'ion-valid' : ''} ${
-          isValid === false ? 'ion-invalid' : ''
-        } ${isTouched ? 'ion-touched' : ''}`}
+        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"
diff --git a/static/usage/v8/toggle/helper-error/vue.md b/static/usage/v8/toggle/helper-error/vue.md
index febac4cde0..55a87adc29 100644
--- a/static/usage/v8/toggle/helper-error/vue.md
+++ b/static/usage/v8/toggle/helper-error/vue.md
@@ -17,31 +17,31 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue';
+  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>();
+  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;
-    };
+      const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+        isTouched.value = true;
+        isValid.value = event.detail.checked;
+      };
 
-    return {
-      wifi,
-      isTouched,
-      isValid,
-      validateToggle,
-    };
-  },
-});
+      return {
+        wifi,
+        isTouched,
+        isValid,
+        validateToggle,
+      };
+    },
+  });
 </script>
 ```

From 517c08c1dce32cfbd7a5163ba8c0092c8bbe9435 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 11:38:28 -0700
Subject: [PATCH 11/12] fix(toggle): use correct label text

---
 static/usage/v8/toggle/helper-error/react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v8/toggle/helper-error/react.md b/static/usage/v8/toggle/helper-error/react.md
index 08db95cfd8..926a0bd0d2 100644
--- a/static/usage/v8/toggle/helper-error/react.md
+++ b/static/usage/v8/toggle/helper-error/react.md
@@ -28,7 +28,7 @@ function Example() {
         checked={isChecked}
         onIonChange={(event) => validateToggle(event)}
       >
-        I agree to the terms and conditions
+        Wi-Fi
       </IonToggle>
     </>
   );

From 5f40e6d03a07502c51540b3084a2a38821ebfe68 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Mar 2025 11:45:54 -0700
Subject: [PATCH 12/12] chore(toggle): remove dev build

---
 static/code/stackblitz/v8/angular/package.json |  4 ++--
 static/code/stackblitz/v8/html/package.json    |  2 +-
 static/code/stackblitz/v8/react/package.json   |  4 ++--
 static/code/stackblitz/v8/vue/package.json     |  4 ++--
 static/usage/v8/toggle/helper-error/demo.html  | 10 ++--------
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index e718ff50c2..b0c78d7f46 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ionic/angular": "8.4.4-dev.11741630999.189d7fc2",
-    "@ionic/core": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/angular": "^8.0.0",
+    "@ionic/core": "^8.0.0",
     "ionicons": "7.4.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index 90a083f37c..422f9a91f5 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/core": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/core": "8.4.1",
     "ionicons": "7.4.0"
   }
 }
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index 2c15fac4ec..c0803683c6 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.4.4-dev.11741630999.189d7fc2",
-    "@ionic/react-router": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/react": "8.4.1",
+    "@ionic/react-router": "8.4.1",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index 40fc59723c..b9394bad9d 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.4.4-dev.11741630999.189d7fc2",
-    "@ionic/vue-router": "8.4.4-dev.11741630999.189d7fc2",
+    "@ionic/vue": "8.4.1",
+    "@ionic/vue-router": "8.4.1",
     "vue": "^3.2.25",
     "vue-router": "4.5.0"
   },
diff --git a/static/usage/v8/toggle/helper-error/demo.html b/static/usage/v8/toggle/helper-error/demo.html
index c46c7e94d7..25c9bd8ec5 100644
--- a/static/usage/v8/toggle/helper-error/demo.html
+++ b/static/usage/v8/toggle/helper-error/demo.html
@@ -6,14 +6,8 @@
     <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.4.4-dev.11741630999.189d7fc2/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.4.4-dev.11741630999.189d7fc2/css/ionic.bundle.css"
-    />
+    <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>