Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

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

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',
        "type": '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

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”
spaciousbooleanfalseSet to “true” to double the padding spacing surrounding the body content if required
classesstringfalseCustom classes to add to the panel
idstringfalseThe HTML id for the panel
attributesobjectfalseHTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefixstringfalseSets 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: ”
iconTypestringfalseAdds an icon to the panel, before the body content, by setting the icon type
iconSizestringfalseIcon 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) .

NameTypeRequiredDescription
textstringtrueThe text describing the error
idstringtrueThe HTML id attribute that the error summary link can anchor to
attributesobjectfalseHTML 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)