The Error Summary component provides field-level error reporting for forms. This Component takes an object array and shows a list of errors in the forms where its used in.

The Error Summary component is intended to be included at the top of pages containing forms and is designed to report form errors in a usable and accessible way.
Consumer can pass the instance of the HTML form as one of the component's property to render the errors in the respective form. As an alternate, they can also have the Error Summary Component as a child to the "form" element where the error should be rendered. Please refer the example given below. Server side errors can also be displayed using this component just by setting the error object attribute in the given format. Each field in error would be pushed to error state when the error object is set and the first error field on the form would be on focus. Each field-level form error is reported with hyperlink to the field in question for easy navigation. Component doesn't have the intelligence to validate the fields in error when the values are changed and so the error field would be pushed into valid state when the value is changed and this is to make the form eligible to the submitted back to the server.

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.