Error summary
The Error Summary appears on the top of a page after a user submits a form which generates an error. It presents a list of errors that have occurred and allows users to identify and correct mistakes easily.
Anatomy
- Title: A brief general feedback message summarizing the presence of errors
- Icon: A visual indicator of an error
- Details: A list of specific errors that led to the feedback message.
- Box: A colored area that contains the entire error summary.
Usage Guidelines
Placement
The error summary should always appear on top of the page, before the form elements.
By positioning errors on top of the page we make sure they’re the first thing a user sees after the page loads. This way also helps with users on a screen reader since this is the first information they’ll get in the content block.
message
The summary should provide a concise list of all errors, ideally in the order they appear on the form. Each item in the list should describe the error clearly and be clickable. Clicking on an error should take the user directly to the problematic field, ensuring that they can quickly locate and resolve the issue.
Validation
Only use the error summary for actual errors that won’t let the user navigate further. Don’t use it for information, tips, etc.