Error Summary
ProA consolidated list of all validation errors for a form, displayed at the top of the form after submission fails. Each error is an anchor link that jumps focus to the offending field. The component receives focus automatically when it appears, ensuring screen reader users are immediately aware of the issues. Always rendered as a landmark with role="alert" so assistive technology announces it.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard error summary with a heading, error count, and linked error list. | Use at the top of any form that validates on submit and has one or more validation errors. |
| With Links |
Usage Guidelines
Place at the top of the form, before any fields.
Use as a standalone error display without linking to the offending fields.
Link each error message to its corresponding field using anchor hrefs.
Hide the error summary when the user starts correcting individual fields — only remove resolved items.
Focus the error summary container when it first appears after a failed submission.
Place at the bottom of the form where it may not be visible.
Include the total error count in the heading — "There are 3 errors in this form".
Code
Design Tokens
Accessibility
- Uses role="alert" to announce the error summary immediately when it appears.
- The container has tabindex="-1" and receives programmatic focus on render.
- Each error item is an anchor link (<a>) that moves focus to the corresponding form field.
- Include the error count in the heading for screen readers — "There are 3 errors in this form".
- When an error is resolved, remove it from the list and update the count.