GOVUK Error messages

An example of the govuk error message component.

Open example in new window
HTML 










<div class="govuk-form-group govuk-form-group--error">

<fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error">

  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">

      <h1 class="govuk-fieldset__heading">
        When was your passport issued?
      </h1>

  </legend>


  <div id="passport-issued-hint" class="govuk-hint">
    For example, 12 11 2007
  </div>




  <p id="passport-issued-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> The date your passport was issued must be in the past
  </p>

  <div class="govuk-date-input" id="passport-issued">

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
          Day
        </label>

      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
      </div>
    </div>

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
          Month
        </label>

      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
      </div>
    </div>

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
          Year
        </label>

      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
      </div>
    </div>

  </div>


</fieldset>



</div>
Jinja 
{% from "govuk_frontend_jinja/components/date-input/macro.html" import govukDateInput -%}
{{ govukDateInput({
    "id": "passport-issued",
    "namePrefix": "passport-issued",
    "fieldset": {
      "legend": {
        "text": "When was your passport issued?",
        "isPageHeading": true,
        "classes": "govuk-fieldset__legend--xl"
      }
    },
    "hint": {
      "text": "For example, 12 11 2007"
    },
    "errorMessage": {
      "text": "The date your passport was issued must be in the past"
    },
    "parts": [
      {
      "classes": "govuk-input--width-2 govuk-input--error",
      "name": "day",
      "value": "6"
      },
      {
      "classes": "govuk-input--width-2 govuk-input--error",
      "name": "month",
      "value": "3"
      },
      {
      "classes": "govuk-input--width-4 govuk-input--error",
      "name": "year",
      "value": "2076"
      }
    ]
}) }}