Skip to content

Error Summary

Error Summary Notifications are used to summarise form errors.

Usage

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…

Content

  • 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'.

Accessibility

  • 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)

Properties

NameValuesDefault

id

String

errors (required)

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

ref

Ref<HTMLElement>

title

ReactNode

Oops, there's a problem...

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

Boolean

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

RefObject<ScrollView>

scrollPosScroll position of this component. React Native only

{x: number; y: number}

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

JSX.IntrinsicElements["div"]

Tokens