Skip to content

Error Summary

Error Summary Notifications are used to summarise form errors.


Error Summary Notifications summarise all the errors on a form in a single notification. The ids of the form elements on web are used to focus them when each message is clicked, make sure the correct ones are passed.

Oops, there’s a problem…


  • Always use the same wording as the error messages which appear next to the input
    • Unless those messages contain links - do not include those as these messages get wrapped in a link.
  • Always use plain language
    • Errors should always be clear and concise
  • Never use pleasantries like 'Please'.


  • Always place the component at the top of the page.
    • If your page includes breadcrumbs or a back link, place it below these, but above the h1
  • Always have the component on the page, and pass any errors to it when forms are submitted.
    • The component will be hidden until it receives errors.
  • Ensure that the keyboard focus moves to the error summary
    • This should happen automatically.
    • React Native should scroll to the error summary.
  • Ensure hat the errors that appear in the summary link to their respective fields (web only)
    • This should happen automatically

Dynamic Example

The error summary notification component should be on the page but hidden until it receives errors. Passing errors to the error summary notification when submitting a form will display the errors and focus the component (or scroll to it on React Native)





errors (required)

{id: string; message: ReactNode;}[]





Oops, there's a problem...

noMarginRemove the default margin that appears at bottom of the notification when it is displayed


scrollViewRef (required)Ref of the scroll view this component appears in. React Native only


scrollPosScroll position of this component. React Native only

{x: number; y: number}

...Spread to outer most div - the 'focus wrapper'