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'; +## 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'; + + + ## 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..9e886c3311d --- /dev/null +++ b/static/usage/v8/select/helper-error/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html +
+ + Apple + Banana + Orange + + +
+ + Submit +
+``` 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..ea3ff53e05f --- /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, IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + standalone: true, + imports: [IonSelect, 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: [false, 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 checkbox. + 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..09828e2803c --- /dev/null +++ b/static/usage/v8/select/helper-error/demo.html @@ -0,0 +1,59 @@ + + + + + + Input + + + + + + + +
+
+ + Apple + Banana + Orange + + +
+ + Submit +
+
+ + + + 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..c06eb8132a8 --- /dev/null +++ b/static/usage/v8/select/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/select/helper-error/javascript.md b/static/usage/v8/select/helper-error/javascript.md new file mode 100644 index 00000000000..f3cc63c31c9 --- /dev/null +++ b/static/usage/v8/select/helper-error/javascript.md @@ -0,0 +1,44 @@ +```html +
+ + Apple + Banana + Orange + + +
+ + Submit +
+ + +``` 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..89c0c5d407a --- /dev/null +++ b/static/usage/v8/select/helper-error/react.md @@ -0,0 +1,54 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonSelect, IonSelectOption, IonButton, SelectCustomEvent } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const favFruitRef = useRef(null); + + const validateSelect = (event: SelectCustomEvent<{ value: string }>) => { + setIsTouched(true); + setIsValid(event.detail.value); + }; + + const submit = (event: React.FormEvent) => { + event.preventDefault(); + + if (favFruitRef.current) { + validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{ + value: string; + }>); + } + }; + + return ( + <> +
+ validateSelect(event)} + > + Apple + Banana + Orange + + +
+ + + Submit + +
+ + ); +} + +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..ea20c69da3f --- /dev/null +++ b/static/usage/v8/select/helper-error/vue.md @@ -0,0 +1,56 @@ +```html + + + +```