# Error summary

Status: Draft

# Component

An error summary is displayed at the top of a page to summarise any errors which have occurred.

When an error occurs, you must show both an error summary and an error message next to each input that contains an error.

Error summary

# Rules

Do

  • Move focus to the error summary when an error occurs
  • Include a heading 'There is a problem'.
  • An error summary must contain a link to answers that contain validation errors.
  • Error messages in the summary must have the same wording as those which appear next to the answers.
  • Display the error summary at the top of the page, below the breadcrumb if one is present.

# Structure

Error summary specifications

# Specifications

Min height Padding(x) Padding(y)
100pt 16pt 16pt

# Typography

Type Font size Line height Font weight
Summary title 20pt 28pt Bold
Error message 16pt 24pt Bold
Last Updated: 10/6/2020, 8:34:39 AM