# Form Error Handling
The Form Error Handling pattern communicates any invalid form fields to users. You can use this pattern for any product form at Benevity.
# Overview
Our forms require accessible error handling so that all users will clearly understand what errors they need to fix before moving forward. The accessible error alert and invalid form fields are standard components to use in your designs.
# How it works
The error alert is displayed on a non-dismissable card above the form’s heading title. It includes an error icon, error statement, and error message links to each invalid form field. The error statement provided can be used to introduce any form field errors.
The invalid form field is styled with an error outline, and includes an error icon and error message.
# Anatomy
There are 3 main components to the error alert: icon, statement and message links.
There are 3 main components to the invalid form field: outline, icon and message.
# How to use
The Accessible Error Handling components are displayed in a specific order as a user fills out a form.
- Invalid form fields can be displayed immediately after a user exits out of the field, or after a user submits the form. The input must have aria-invalid="true”. Do not announce to the screenreader when a user exits out of the field, as this can create challenging navigation.
Ensure the icon has a textual equivalent by including aria-label=“error”. Error messages must be programmatically associated to the field by using html-required or aria-required.
The error alert is a static component displayed after a user submits the form. The error alert then receives :focus. The error alert includes error message links that can be used to quickly navigate to the fields requiring changes.
- Optional fields do not receive an error message if they are not filled out, but they will receive an error message if the information provided is invalid.
- Display error messages for invalid fields that have been interacted with. Do not display an error message before the user has exited out of the field.
Ensure the error message links provided in the error alert are worded the same as the invalid form fields.
Use the same error alert component for errors that do not relate directly to a specific form field, like if there is a problem with connecting to our platform.