Skip to content

Commit dab36df

Browse files
authored
docs(input, textarea): clarify error text behavior (#2853)
1 parent 407f669 commit dab36df

File tree

2 files changed

+7
-3
lines changed

2 files changed

+7
-3
lines changed

docs/api/input.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ import Fill from '@site/static/usage/v7/input/fill/index.md';
6868

6969
## Helper & Error Text
7070

71-
Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. 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.
71+
Helper and error text can be used inside of an input 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-input`. This ensures errors are not shown before the user has a chance to enter data.
72+
73+
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.
7274

7375
import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
7476

docs/api/textarea.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ import Fill from '@site/static/usage/v7/textarea/fill/index.md';
4949

5050
## Helper & Error Text
5151

52-
Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-textarea`. 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.
52+
Helper and error text can be used inside of a textarea 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-textarea`. This ensures errors are not shown before the user has a chance to enter data.
53+
54+
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.
5355

5456
import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md';
5557

@@ -145,4 +147,4 @@ interface TextareaCustomEvent extends CustomEvent {
145147
<CustomProps />
146148

147149
## Slots
148-
<Slots />
150+
<Slots />

0 commit comments

Comments
 (0)