ErrorSummary

const PreviewEn = () => {
  return (
    <ErrorSummary>
      <ErrorSummary.Heading>
        To proceed, you must correct the following errors:
      </ErrorSummary.Heading>
      <ErrorSummary.List>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>
            Birthdate cannot be after the year 2005
          </ErrorSummary.Link>
        </ErrorSummary.Item>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>
            Phone number can only contain digits
          </ErrorSummary.Link>
        </ErrorSummary.Item>
        <ErrorSummary.Item>
          <ErrorSummary.Link href='#'>Email must be valid</ErrorSummary.Link>
        </ErrorSummary.Item>
      </ErrorSummary.List>
    </ErrorSummary>
  );
};

render(<PreviewEn />)

Use ErrorSummary when

• you need to present a clear overview of the errors that must be corrected before a form can be submitted
• a form contains many fields, making it difficult for users to understand where the errors are located

Avoid ErrorSummary when

• the feedback does not prevent submission, such as warnings or recommendations
• you need to display system-level messages; use Alert instead

Example

Use in forms

In the example below, each link in the ErrorSummary lets you navigate directly to the field containing an error.

const WithFormEn = () => {
  return (
    <>
      <Textfield
        label='First name'
        id='first-name'
        error='First name must be at least 2 characters'
      />

      <Textfield
        label='Phone'
        id='phone'
        type='tel'
        error='Phone number can only contain digits'
      />

      <ErrorSummary>
        <ErrorSummary.Heading>
          To proceed, you must correct the following errors:
        </ErrorSummary.Heading>
        <ErrorSummary.List>
          <ErrorSummary.Item>
            <ErrorSummary.Link href='#first-name'>
              First name must be at least 2 characters
            </ErrorSummary.Link>
          </ErrorSummary.Item>
          <ErrorSummary.Item>
            <ErrorSummary.Link href='#phone'>
              Phone number can only contain digits
            </ErrorSummary.Link>
          </ErrorSummary.Item>
        </ErrorSummary.List>
      </ErrorSummary>
    </>
  );
};

render(<WithFormEn />)

Guidelines

ErrorSummary is used to display a summary when there are errors or omissions in something the user has done. A summary may include one or several errors.
ErrorSummary should contain all error messages present on the page, so users can navigate directly to them by clicking the links in the summary.

Placement

We recommend placing ErrorSummary just above the Next/Submit button. This helps users understand the connection between the errors and why they cannot proceed.

In some cases, it may be better to show the summary at the top of the page.
You can read more about this in the article on error messages.

Visibility

The summary should not be visible before the user has taken an action that triggers an error. It should become visible only after the user performs an action that results in errors.

• If validation happens continuously (for example using onBlur on each field), wait to show ErrorSummary until the user attempts to submit the form.
• It is important that the component receives focus when it appears, so the user notices that there are errors or missing information.
• Error messages must link directly to the relevant field.
• If the error applies to several fields, for example when two fields are validated together, link to the first instance of the error.

Text

Ensure that the heading “To continue, you must correct the following errors” is used in ErrorSummary. The error messages in the summary should be phrased exactly the same as the error messages displayed at the relevant fields.