Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiForm] Add ability to show error callout in the bottom of the form #1854

Closed
cjcenizal opened this issue Apr 18, 2019 · 2 comments · Fixed by #4497
Closed

[EuiForm] Add ability to show error callout in the bottom of the form #1854

cjcenizal opened this issue Apr 18, 2019 · 2 comments · Fixed by #4497

Comments

@cjcenizal
Copy link
Contributor

Currently, this form error appears at the top. Many of the forms used by the ES UI team are fairly tall, so if there's an error the user won't see the callout unless they scroll up. We've accommodated this by adding another danger callout at the bottom of the screen to let the user know the form contains errors, but this wouldn't be necessary if EuiForm placed its own callout at the bottom.

@cchaos
Copy link
Contributor

cchaos commented Sep 18, 2020

EuiForm now has a invalidCallout prop that allows for 'above' | 'none'. We can now easily add the option for 'below' as well.

@cchaos cchaos changed the title [DISCUSS] Consider moving the EuiForm's error callout to the bottom of the form Add ability to show EuiForm's error callout in the bottom of the form Sep 18, 2020
@cchaos cchaos changed the title Add ability to show EuiForm's error callout in the bottom of the form [EuiForm] Add ability to show error callout in the bottom of the form Sep 20, 2020
@chandlerprall
Copy link
Contributor

Some thoughts on this from our weekly:

  • shift focus to the validation errors when the box appears, better for screen reader support & can scroll it into view
  • in addition to above/below, is there a version of the component that returns the validation errors element, allowing it to be placed anywhere in the form
  • pattern familiarity & recognition - does this or related changes cause confusion for users who are familiar with the existing pattern of always displaying errors at the top

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants