Forms
FormError
Render validation feedback. The digital equivalent of red pen on a spelling test.
Curated demo
Enter a valid email address.
Enter a valid email address.
Reference
Render validation feedback. The digital equivalent of red pen on a spelling test.
- Render FormError only when validation fails. Don't yell at the user before they've even tried.
- Pass the message copy with the required text prop.
- Reference it with aria-describedby and aria-invalid. Accessibility is not optional!
Example snippet
<FormError id="email-error" text="Enter a valid email address." />