Error summary examples

• # default

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "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"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "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"
      }
    ]
  }) }}
          

• # without links

  Open this example in a new tab

  There is a problem

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

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

• # mixed with and without links

  Open this example in a new tab

  There is a problem

  • Invalid username or password
  • Agree to the terms of service to log in

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Invalid username or password"
      },
      {
        "text": "Agree to the terms of service to log in",
        "href": "#example-error-1"
      }
    ]
  }

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

• # with description only

  Open this example in a new tab

  There is a problem

  The file couldn't be loaded. Try again later.

  {
    "titleText": "There is a problem",
    "descriptionText": "The file couldn't be loaded. Try again later."
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "descriptionText": "The file couldn't be loaded. Try again later."
  }) }}
          

• # with everything

  Open this example in a new tab

  There is a problem

  Please fix the errors below.

  • Invalid username or password
  • Agree to the terms of service to log in

  {
    "titleText": "There is a problem",
    "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"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "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"
      }
    ]
  }) }}
          

• # html as titleText

  Open this example in a new tab

  Alert, <em>alert</em>

  • Invalid username or password

  {
    "titleText": "Alert, <em>alert</em>",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "Alert, <em>alert</em>",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # title html

  Open this example in a new tab

  Alert, alert

  • Invalid username or password

  {
    "titleHtml": "Alert, <em>alert</em>",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleHtml": "Alert, <em>alert</em>",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # description

  Open this example in a new tab

  There is a problem

  Lorem ipsum

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "descriptionText": "Lorem ipsum",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "descriptionText": "Lorem ipsum",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # html as descriptionText

  Open this example in a new tab

  There is a problem

  See errors below (>)

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "descriptionText": "See errors below (>)",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "descriptionText": "See errors below (>)",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # description html

  Open this example in a new tab

  There is a problem

  See errors below

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "descriptionHtml": "See <span>errors</span> below",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "descriptionHtml": "See <span>errors</span> below",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # classes

  Open this example in a new tab

  There is a problem

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "classes": "extra-class one-more-class",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "classes": "extra-class one-more-class",
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # attributes

  Open this example in a new tab

  There is a problem

  • Invalid username or password

  {
    "titleText": "There is a problem",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    },
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    },
    "errorList": [
      {
        "text": "Invalid username or password"
      }
    ]
  }) }}
          

• # error list with attributes

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Error-1",
        "href": "#item",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Error-1",
        "href": "#item",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }) }}
          

• # error list with html as text

  Open this example in a new tab

  There is a problem

  • Descriptive link to the <b>question</b> with an error

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Descriptive link to the <b>question</b> with an error"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Descriptive link to the <b>question</b> with an error"
      }
    ]
  }) }}
          

• # error list with html

  Open this example in a new tab

  There is a problem

  • The date your passport was issued must be in the past

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "html": "The date your passport was issued <b>must</b> be in the past"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "html": "The date your passport was issued <b>must</b> be in the past"
      }
    ]
  }) }}
          

• # error list with html link

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "html": "Descriptive link to the <b>question</b> with an error",
        "href": "#error-1"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "html": "Descriptive link to the <b>question</b> with an error",
        "href": "#error-1"
      }
    ]
  }) }}
          

• # error list with html as text link

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Descriptive link to the <b>question</b> with an error",
        "href": "#error-1"
      }
    ]
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "Descriptive link to the <b>question</b> with an error",
        "href": "#error-1"
      }
    ]
  }) }}
          

• # autofocus disabled

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "disableAutoFocus": true
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "disableAutoFocus": true
  }) }}
          

• # autofocus explicitly enabled

  Open this example in a new tab

  There is a problem

  {
    "titleText": "There is a problem",
    "disableAutoFocus": false
  }

  
  {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
  
  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "disableAutoFocus": false
  }) }}