GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Error summary
<gcds-error-summary>

Also called: error list. An error summary is a list of user errors in a form.
  • GitHub
  • Figma

Error summary component preview

On this page

Coding and accessibility for error summaries

Use the error summary with GC Design System components

All GC Design System components come with default error handling for required form components. For error summaries this means any required component will prompt an inline error message onBlur by default. That error message will be listed in the error summary on form submit. The GC Design System error summary uses the listen attribute to collect errors. The error summary will list errors from GC Design System components onSubmit. Errors are listed in the same order as they appear on the page.
  • Enable any controls the person will need to access to recover from any of the errors.
  • Consider replacing any generic default error message with text that defines the specific problem and how a person can fix it.

Opt to use the error summary with your own component instances

If you’re using some of your own form components:
  • Add errors for those instances by passing the error-links attribute for any component or element you’re using that has an error message. Then the error messages will appear.
  • Match the error summary item content to each of your error messages.
  • Order errors in the error summary in the same order that they appear on the form.

Opt to change the error heading

Opt to make your error heading more specific by using the heading attributes.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation. The error-links attribute defines the list of errors to display in the error summary. Format: { link-href: link-label }. 
<gcds-error-summary error-links='{ "#error-href-1": "Error summary item.", "#error-href-2": "Error summary item.", "#error-href-3": "Error summary item." }'>
</gcds-error-summary>

heading

The heading attribute defines the error summary heading. 
<gcds-error-summary heading="Heading" error-links='{ "#error-href-1": "Error summary item.", "#error-href-2": "Error summary item.", "#error-href-3": "Error summary item." }'>
</gcds-error-summary>

listen

The listen attribute controls whether the error summary should listen for the gcdsError event to generate a list of errors or not. By default, it is set to true. 
<gcds-error-summary error-links='{ "#error-href-1": "Error summary item.", "#error-href-2": "Error summary item.", "#error-href-3": "Error summary item." }' listen>
</gcds-error-summary>
Code builder Generate an instance of the component you need by selecting its code properties.
  • Explore by choosing different code values to generate the instance you want.
  • Get the code and pull it into your environment.
  • Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-09-15