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'; +## 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'; + + + ## 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 +
+ + Wi-Fi + +
+``` 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 @@ + + + + + + Input + + + + + + + + + +
+ + Wi-Fi + +
+ + + + 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'; + + 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 + + Wi-Fi + + + +``` 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(null); + + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + const [isChecked, setIsChecked] = useState(true); + + const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => { + setIsTouched(true); + setIsChecked(event.detail.checked); + setIsValid(event.detail.checked); + }; + + return ( + <> + validateToggle(event)} + > + Wi-Fi + + + ); +} + +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 + + + +```