Error summary

Use this component at the top of a page to summarise any errors a user has made.

When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.

Check out the Alert component for guidance on how the render the error summary accessibly.

<ErrorSummary title="There's a problem.">
  <Text priority="error">
    <a href="">One insurance package has to be selected</a>
  </Text>
  <Text priority="error">
    <a href="">Enter a postcode, like AA11AA</a>
  </Text>
</ErrorSummary>

Usage

Some rules to follow when using the error summary component

• overwrite the title of the error summary with a short context specific message
• link to each of the answers that have validation errors
• show the same error messages next to the inputs with errors

<ErrorSummary title="Could not request an offer">
  <Text priority="error">
    <a href="#insurance-package-1">One insurance package has to be selected</a>
  </Text>
</ErrorSummary>

Props

Example

<ErrorSummary title="Could not request an offer">
  <Text priority="error">
    <a href="#insurance-package-1">One insurance package has to be selected</a>
  </Text>
</ErrorSummary>