ComponentError message

6 of 6 upstream examples match. Razor component: <NhsukErrorMessage>

Default

Matches upstream

Enter your full name

Razor Pages and MVC

<nhsuk-error-message text="Enter your full name" />

Blazor

<NhsukErrorMessage Text="Enter your full name" />

Nunjucks (upstream)

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

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

With HTML

Matches upstream

Open on its own page (opens in new tab)

Postcode must not include & and <

Razor Pages and MVC

<nhsuk-error-message html="Postcode must not include &amp; and &lt;" />

Blazor

<NhsukErrorMessage Html="Postcode must not include &amp; and &lt;" />

Nunjucks (upstream)

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

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

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Postcode must not include & and <

Razor Pages and MVC

<nhsuk-error-message>
    Postcode must not include &amp; and &lt;
</nhsuk-error-message>

Blazor

<NhsukErrorMessage>
    Postcode must not include &amp; and &lt;
</NhsukErrorMessage>

Nunjucks (upstream)

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

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

Without visually hidden text

Matches upstream

Open on its own page (opens in new tab)

There is an error on line 42

Razor Pages and MVC

<nhsuk-error-message text="There is an error on line 42" visually-hidden-text="" />

Blazor

<NhsukErrorMessage Text="There is an error on line 42" VisuallyHiddenText="" />

Nunjucks (upstream)

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

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

With text escaping

Matches upstream

Open on its own page (opens in new tab)

Postcode must not include & and <

Razor Pages and MVC

<nhsuk-error-message text="Postcode must not include & and <" />

Blazor

<NhsukErrorMessage Text="Postcode must not include & and <" />

Nunjucks (upstream)

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

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

With translations

Matches upstream

Open on its own page (opens in new tab)

Rhowch eich enw llawn

Razor Pages and MVC

<nhsuk-error-message text="Rhowch eich enw llawn" visually-hidden-text="Gwall" />

Blazor

<NhsukErrorMessage Text="Rhowch eich enw llawn" VisuallyHiddenText="Gwall" />

Nunjucks (upstream)

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

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