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.

Note

The general form component guidelines apply to this component. Please make sure you’re familiar with them first.

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.

Show code

Please correct these errors and try again.

• Email: Please enter a valid email address

Email

Password

Show Password

Forgot password?

JSX

<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>;

HTML

<form class="o3-form">
  <div class="o3-form__error-summary">
    <span class="o3-form__error-summary-icon"></span>
    <div
      class="o3-form__error-summary__heading"
      role="alert"
      aria-labelledby="error-summary-title"
    >
      <span id="error-summary-title" class="o3-typography-heading5">
        Please correct these errors and try again.
      </span>
      <ul class="o3-forms__error-summary__list o3-typography-body-small">
        <li>
          <a class="o3-typography-link" href="#user-email">Email</a>
          <span>
            :
            <!-- -->
            Please enter a valid email address
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="o3-form-field">
    <label class="o3-form-field__label" for="user-email">Email</label>
    <input
      id="user-email"
      class="o3-form o3-form-text-input"
      required=""
      aria-required="true"
      type="text"
      value="john@gmcom"
    />
  </div>
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-password-input-_3689715209086173"
    >
      Password
    </label>
    <input
      id="o3-form-password-input-_3689715209086173"
      class="o3-form o3-form-text-input"
      required=""
      aria-required="true"
      type="password"
    />
  </div>
  <div class="o3-password-input__controls">
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="o3-form-password-input-_3689715209086173-showPassword"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="o3-form-password-input-_3689715209086173-showPassword"
        class="o3-form-input-checkbox__label"
      >
        Show Password
      </label>
    </div>
    <a class="o3-typography-link" href="">Forgot password?</a>
  </div>
</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.