Skip to content

Error summary

The Error Summary appears on the top of a page after a user submits a form which generates an error. It presents a list of errors that have occurred and allows users to identify and correct mistakes easily.

Anatomy

  1. Title: A brief general feedback message summarizing the presence of errors
  2. Icon: A visual indicator of an error
  3. Details: A list of specific errors that led to the feedback message.
  4. Box: A colored area that contains the entire error summary.

Usage Guidelines

Placement

The error summary should always appear on top of the page, before the form elements.

Forgot password?
<Form>
<ErrorSummary
errors={[
{
id: "user-email",
fieldName: "Email",
message: "Please enter a valid email address",
},
]}
/>
<TextInput
inputId="user-email"
label="Email"
attributes={{ defaultValue: "john@gmcom" }}
/>
<PasswordInput label="Password" />
</Form>;
Open in StoryBook

By positioning errors on top of the page we make sure they’re the first thing a user sees after the page loads. This way also helps with users on a screen reader since this is the first information they’ll get in the content block.

message

The summary should provide a concise list of all errors, ideally in the order they appear on the form. Each item in the list should describe the error clearly and be clickable. Clicking on an error should take the user directly to the problematic field, ensuring that they can quickly locate and resolve the issue.

Validation

Only use the error summary for actual errors that won’t let the user navigate further. Don’t use it for information, tips, etc.