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

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

Macro

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

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

Error message with HTML

Open this example in a new tab: Error message with HTML

Error: Postcode must not include & and <

Code

Markup

<p class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Error: </span>Postcode must not include &amp; and &lt;
</p>

Macro

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

{{ errorMessage({
  html: "Postcode must not include &amp; and &lt;"
}) }}

Error message with HTML via call block

Open this example in a new tab: Error message with HTML via call block

Error: Postcode must not include & and <

Code

Markup

<p class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Error: </span>Postcode must not include &amp; and &lt;
</p>

Macro

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

{% call errorMessage() %}
Postcode must not include &amp; and &lt;
{%- endcall %}

Error message without visually hidden text

Open this example in a new tab: Error message without visually hidden text

There is an error on line 42

Code

Markup

<p class="nhsuk-error-message">
  There is an error on line 42
</p>

Macro

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

{{ errorMessage({
  text: "There is an error on line 42",
  visuallyHiddenText: ""
}) }}

Error message with text escaping

Open this example in a new tab: Error message with text escaping

Error: Postcode must not include & and <

Code

Markup

<p class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Error: </span>Postcode must not include &amp; and &lt;
</p>

Macro

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

{{ errorMessage({
  text: "Postcode must not include & and <"
}) }}

Error message with translations

Open this example in a new tab: Error message with translations

Gwall: Rhowch eich enw llawn

Code

Markup

<p class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Gwall: </span>Rhowch eich enw llawn
</p>

Macro

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

{{ errorMessage({
  text: "Rhowch eich enw llawn",
  visuallyHiddenText: "Gwall"
}) }}