Short description

When a user attempts to submit a form with errors, this component displays a summary of those errors above the form. Including an error summary greatly assists users in promptly identifying and addressing multiple errors in a consolidated manner. It provides a clear indication of what went wrong and what needs to be corrected.

Each form component that contains an error is listed as a row, displaying the name of the field and linking it to the corresponding form element.

When and how to use it

After trying to submit the form and it doesn’t validate, the summary is displayed.

Behaviour

The headline always has a summary of how many errors the form contains included in the sentence. When it’s displayed, the focus is set to the text and the viewport of the browser is scrolled so it's visible on the top.

Behaviour of error summary

Placement

Always above the form, after trying to submit a form containing errors.

Do's and don'ts

Do

• Always use together with error-states for each field with errors.
• Consider adding "Error: " to the page-title when the message is displayed, this guarantees that a screen reader notifies the user.

The list of errors is the same as the field labels for each field containing errors.

-

• Details: Specification in Figma
• Instruction: How to access Figma