Error-summary examples

Show params

Params

params:
- name: titleText
  type: string
  required: true
  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: titleHtml
  type: string
  required: true
  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: descriptionText
  type: string
  required: false
  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
- name: descriptionHtml
  type: string
  required: false
  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
- name: errorList
  type: array
  required: true
  description: Contains an array of error link items and all their available arguments.
  params:
  - name: href
    type: string
    required: false
    description: Href attribute for the error link item. If provided item will be an anchor.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the error link anchor.
- name: classes
  type: string
  required: false
  description: Classes to add to the error-summary container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the error-summary container.

accessibilityCriteria: |
  - Must be focused when the page loads

default

Show code

Macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "There is a problem",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "The date your passport was issued must be in the past",
      "href": "#example-error-1"
    },
    {
      "text": "Enter a postcode, like AA1 1AA",
      "href": "#example-error-2"
    }
  ]
})  }}

Markup

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
    <h2 class="mb-base font-bold" id="error-summary-title">There is a problem</h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">The date your passport was issued must be in the past</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert">Enter a postcode, like AA1 1AA</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

with headingLevel 3

Show code

Macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "The date your passport was issued must be in the past",
      "href": "#example-error-1"
    },
    {
      "text": "Enter a postcode, like AA1 1AA",
      "href": "#example-error-2"
    }
  ]
})  }}

Markup

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
    <h3 class="mb-base font-bold" id="error-summary-title">Título con h3</h3>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">The date your passport was issued must be in the past</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert">Enter a postcode, like AA1 1AA</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

without links

Show code

Macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "There is a problem",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Invalid username or password"
    }
  ]
})  }}

Markup

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
    <h2 class="mb-base font-bold" id="error-summary-title">There is a problem</h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Invalid username or password
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

mixed with and without links

Show code

Macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "There is a problem",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Invalid username or password"
    },
    {
      "text": "Agree to the terms of service to log in",
      "href": "#example-error-1"
    }
  ]
})  }}

Markup

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
    <h2 class="mb-base font-bold" id="error-summary-title">There is a problem</h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Invalid username or password
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">Agree to the terms of service to log in</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

with everything

Show code

Macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "There is a problem",
  "headingLevel": 2,
  "descriptionText": "Please fix the errors below.",
  "errorList": [
    {
      "text": "Invalid username or password"
    },
    {
      "text": "Agree to the terms of service to log in",
      "href": "#example-error-1"
    }
  ]
})  }}

Markup

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
    <h2 class="mb-base font-bold" id="error-summary-title">There is a problem</h2>
  <div>
    <p class="mb-base">
      Please fix the errors below.
    </p>
    <ul class="font-semibold text-alert-base">
      <li>
        Invalid username or password
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">Agree to the terms of service to log in</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->