Error summary

Use an error summary at the top of a page to summarise errors made by the user.

An error details component should be used alongside this to show where the errors have been made.

Example Panel With Error Summary contents

Nunjucksfor Example Panel With Error Summary
Nunjucks macro optionsfor Example Panel With Error Summary
HTMLfor Example Panel With Error Summary

Nunjucks

{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/list/_macro.njk" import onsList %}

{% call onsPanel({
    "title": 'There are 2 problems with your answer',
    "variant": 'error'
}) %}
    {{
        onsList({
            "element": 'ol',
            "itemsList": [
                {
                    "text": 'Enter a number',
                    "url": '#container-test-number',
                    "variants": "inPageLink"
                },
                {
                    "text": 'Enter a number less than or equal to 100',
                    "url": '#container-test-percent',
                    "variants": "inPageLink"
                }
            ]
        })
    }}
{% endcall %}

Nunjucks macro options

Name	Type	Required	Description
body	string	true	The contents of the panel. This can contain HTML.
title	string	false	The title for the error summary panel
titleTag	string	false	The HTML heading tag for the `title`. Use to ensure the title has a correct semantic order on the page. Will default to an `h2`
type	string	false	A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”
spacious	boolean	false	Set to “true” to double the padding spacing surrounding the body content if required
classes	string	false	Custom classes to add to the panel
id	string	false	The HTML `id` for the panel
attributes	object	false	HTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefix	string	false	Sets the visually hidden prefix text for screen readers. Default values for each panel type: `information` and `branded` – “Important information: ” `success` – “Completed: ” `warn` and `warn-branded` – “Warning: ” `error`– “Error: ”
iconType	string	false	Adds an icon to the panel, before the body content, by setting the icon type
iconSize	string	false	Icon size can be set to match the size of the body content text as detailed in the typography type scale

HTML

<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
  <div class="ons-panel__header">
    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">There are 2 problems with your answer
    </h2>
  </div>
  <div class="ons-panel__body">
    <ol class="ons-list">
      <li class="ons-list__item">
        <a href="#container-test-number" class="ons-list__link ons-js-inpagelink">Enter a number</a>
      </li>
      <li class="ons-list__item">
        <a href="#container-test-percent" class="ons-list__link ons-js-inpagelink">Enter a number less than or equal to
          100</a>
      </li>
    </ol>
  </div>
</div>

How to use this component

When using this component, make sure you are following the correct errors pattern.

You should not typically need to call the onsError() macro yourself as it is already called from within form input components, and can be set using the error object.

However, if you need to create a pattern or component that requires an error you can use nunjucks' call functionality (opens in a new tab) .

Name	Type	Required	Description
text	string	true	The text describing the error
id	string	true	The HTML `id` attribute that the error summary link can anchor to
attributes	object	false	HTML attributes (for example, data attributes) to add to the field

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Panel’ component on GitHub (opens in a new tab)