Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Error message

These examples are used for automated tests and may not follow service manual best practice.

Error message default

Open this example in a new tab: Error message default

Error: Enter your full name
Code

Markup

<span class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Error:</span> Enter your full name
</span>

Macro

{% from "error-message/macro.njk" import errorMessage -%}

{{ errorMessage({
  text: "Enter your full name"
}) }}

Error message reverse default

Open this example in a new tab: Error message reverse default

Error: Enter your full name
Code

Markup

<span class="nhsuk-error-message nhsuk-error-message--reverse">
  <span class="nhsuk-u-visually-hidden">Error:</span> Enter your full name
</span>

Macro

{% from "error-message/macro.njk" import errorMessage -%}

{{ errorMessage({
  text: "Enter your full name",
  variant: "reverse"
}) }}