Error Summary

Highlights one or more server errors, either due to exceptional circumstances or form validation issues.

Stable

Show details

Error Summary highlights one or more error messages, which are pre-defined on the server-side by back-end developers. It can include links and help text to guide users to appropriate next steps.

It can summarize multiple errors in a form so that users understand what went wrong at a glance and can quickly find and remedy individual inline validation errors.

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Icon	Visual indicator to communicate context and severity at a glance.	No
2. Title	A concise summary in a few words to understand what’s gone wrong at a glance.	No
3. Description	Detailed explanation of error message(s). Displays as a numbered list for multiple errors.	Yes
4. View details	Accordion to expand or hide the “Help text” (see definition below).	Yes
5. Help text	Additional information inside the “View details” accordion to explain the error in more detail and how to resolve the error.	Yes
6. Help link	Link to additional information, like help docs, to guide users towards appropriate next steps. When description is a numbered list, a link can be appended to the end of each list item (individual error).	Yes
7. Container	Filled container to catch the user’s attention and highlight the message’s importance.	No

Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

ErrorSummary

Property	Values	Default
isList Variant	false \| true	false
hasDescription Boolean	true \| false	true
↳ hasHelpLink Boolean	true \| false	true
hasHelpText Variant	true \| false	false
↳ hasLinks Variant	false \| true	false
↳ isExpanded Variant	true \| false	false