Components

Error message

Show an error message next to the field and in the error summary when there is a validation error.

Open this example in a new tab

When will the contract start?

For example, 27 3 2023

Contract start date must be in the future

• HTML
• Nunjucks

HTML

<div class="govuk-form-group govuk-form-group--error">
  <fieldset
    class="govuk-fieldset"
    role="group"
    aria-describedby="contract-start-date-with-whole-error-hint contract-start-date-with-whole-error-error"
  >
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">When will the contract start?</h1>
    </legend>
    <div id="contract-start-date-with-whole-error-hint" class="govuk-hint">
      For example, 27 3 2023
    </div>
    <p
      id="contract-start-date-with-whole-error-error"
      class="govuk-error-message"
    >
      <span class="govuk-visually-hidden">Error:</span> Contract start date must
      be in the future
    </p>
    <div class="govuk-date-input" id="contract-start-date-with-whole-error">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label
            class="govuk-label govuk-date-input__label"
            for="contract-start-date-with-whole-error-day"
          >
            Day
          </label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
            id="contract-start-date-with-whole-error-day"
            name="contract-start-date-with-whole-error-day"
            type="text"
            value="6"
            inputmode="numeric"
          />
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label
            class="govuk-label govuk-date-input__label"
            for="contract-start-date-with-whole-error-month"
          >
            Month
          </label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
            id="contract-start-date-with-whole-error-month"
            name="contract-start-date-with-whole-error-month"
            type="text"
            value="3"
            inputmode="numeric"
          />
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label
            class="govuk-label govuk-date-input__label"
            for="contract-start-date-with-whole-error-year"
          >
            Year
          </label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"
            id="contract-start-date-with-whole-error-year"
            name="contract-start-date-with-whole-error-year"
            type="text"
            value="2001"
            inputmode="numeric"
          />
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
text	string	Required. If html is set, this is not required. Text to use within the error message. If html is provided, the text option will be ignored.
html	string	Required. If text is set, this is not required. HTML to use within the error message. If html is provided, the text option will be ignored.
id	string	ID attribute to add to the error message <p> tag.
classes	string	Classes to add to the error message <p> tag.
attributes	object	HTML attributes (for example data attributes) to add to the error message <p> tag.
visuallyHiddenText	string	A visually hidden prefix used before the error message. Defaults to "Error".

{% from "moduk/components/date-input/macro.njk" import modukDateInput -%}

{{ modukDateInput({
  id: "contract-start-date-with-whole-error",
  namePrefix: "contract-start-date-with-whole-error",
  fieldset: {
    legend: {
      text: "When will the contract start?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  hint: {
    text: "For example, 27 3 2023"
  },
  errorMessage: {
    text: "Contract start date must be in the future"
  },
  items: [
    {
      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: "2001"
    }
  ]
}) -}}

See GOV.UK error message component guidance for:

• when to use this component
• when not to use it
• how it works, including how to write common error messages

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.