diff --git a/docs/api/radio.md b/docs/api/radio.md index c22b839f24..fb717c1483 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 +## 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'; + + + ## 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 0000000000..87b06290e4 --- /dev/null +++ b/static/usage/v8/radio/helper-error/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+``` 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 0000000000..463765b9cb --- /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 0000000000..7a8d6abfcc --- /dev/null +++ b/static/usage/v8/radio/helper-error/demo.html @@ -0,0 +1,62 @@ + + + + + + Input + + + + + + + + + +
+
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+
+ + + + 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 0000000000..d8fb76a225 --- /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'; + + 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 0000000000..64507f303f --- /dev/null +++ b/static/usage/v8/radio/helper-error/javascript.md @@ -0,0 +1,40 @@ +```html +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+ + +``` 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 0000000000..07eabf323c --- /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(false); + const [isValid, setIsValid] = useState(); + + const favFruitRef = useRef(null); + + const validateRadioGroup = (event: RadioGroupCustomEvent<{ value: string }>) => { + setIsTouched(true); + setIsValid(event.detail.value ? true : false); + }; + + const submit = (event: React.FormEvent) => { + event.preventDefault(); + + if (favFruitRef.current) { + validateRadioGroup({ detail: { value: favFruitRef.current.value } } as RadioGroupCustomEvent<{ + value: string; + }>); + } + }; + + return ( + <> +
+ validateRadioGroup(event)} + > + Grapes +
+ Strawberries +
+ Pineapple +
+ Cherries + + +
+ + + Submit + +
+ + ); +} + +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 0000000000..7b823c392d --- /dev/null +++ b/static/usage/v8/radio/helper-error/vue.md @@ -0,0 +1,57 @@ +```html + + + +```