Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Error summary

Component guide

Example

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
    <div class="govuk-error-summary__body">
      
      
        <ul class="govuk-list govuk-error-summary__list">
        
          <li>
          
            <a href="#">Enter your full name</a>
          
          </li>
        
          <li>
          
            <a href="#">The date your passport was issued must be in the past</a>
          
          </li>
        
        </ul>
      
    </div>
  </div>
</div>

{{ govukErrorSummary({
  "titleText": "There is a problem",
  "errorList": [
    {
      "text": "Enter your full name",
      "href": "#"
    },
    {
      "text": "The date your passport was issued must be in the past",
      "href": "#"
    }
  ]
}) }}