Skip to main content
All components

ComponentError summary

14 of 14 upstream examples match. Razor component: <NhsukErrorSummary>

Hide the 2 test-only examples

Default

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

Auto-focus disabled

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
    disable-auto-focus="true"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
    DisableAutoFocus="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ],
  "disableAutoFocus": true
}) }}

Auto-focus explicitly enabled

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
    disable-auto-focus="false"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
    DisableAutoFocus="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ],
  "disableAutoFocus": false
}) }}

With description

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Describe the errors and how to correct them

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    description="Describe the errors and how to correct them"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    Description="@(new ErrorSummaryDescriptionOptions
    {
        Text = "Describe the errors and how to correct them",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "description": {
    "text": "Describe the errors and how to correct them"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

With description as string

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Describe the errors and how to correct them

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    description="Describe the errors and how to correct them"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    Description="@("Describe the errors and how to correct them")"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "description": "Describe the errors and how to correct them",
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

With description HTML

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Describe the errors and how to correct them

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    description-options="@(new ErrorSummaryDescriptionOptions
    {
        Html = "Describe the errors and <span>how to correct them</span>",
    })"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    Description="@(new ErrorSummaryDescriptionOptions
    {
        Html = "Describe the errors and <span>how to correct them</span>",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "description": {
    "html": "Describe the errors and <span>how to correct them</span>"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

With description only

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Describe the errors and how to correct them

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    description="Describe the errors and how to correct them"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    Description="@(new ErrorSummaryDescriptionOptions
    {
        Text = "Describe the errors and how to correct them",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "description": {
    "text": "Describe the errors and how to correct them"
  }
}) }}

With description via call block

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Describe the errors and how to correct them

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
>
    Describe the errors and <span>how to correct them</span>
</nhsuk-error-summary>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
>
    Describe the errors and <span>how to correct them</span>
</NhsukErrorSummary>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{% call errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) %}
  Describe the errors and <span>how to correct them</span>
{% endcall %}

With heading as string

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@("There is a problem")"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": "There is a problem",
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

With heading HTML

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading-options="@(new ErrorSummaryHeadingOptions
    {
        Html = "There is a <span>problem</span>",
    })"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Html = "There is a <span>problem</span>",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Date of birth must be in the past",
            Href = "#example-day",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "html": "There is a <span>problem</span>"
  },
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-day"
    }
  ]
}) }}

With multiple errors

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your first name",
            Href = "#example-first-name",
        },
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your last name",
            Href = "#example-last-name",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your first name",
            Href = "#example-first-name",
        },
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your last name",
            Href = "#example-last-name",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Enter your first name",
      "href": "#example-first-name"
    },
    {
      "text": "Enter your last name",
      "href": "#example-last-name"
    }
  ]
}) }}

With multiple errors (empty items)

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your first name",
            Href = "#example-first-name",
        },
        null,
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Enter your first name",
            Href = "#example-first-name",
        },
        null,
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Enter your first name",
      "href": "#example-first-name"
    },
    false
  ]
}) }}

Without error link

Matches upstream

Open on its own page (opens in new tab)

There is a problem

  • Invalid username or password
Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Invalid username or password",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Invalid username or password",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Invalid username or password"
    }
  ]
}) }}

Without error link (mixed)

Matches upstream

Open on its own page (opens in new tab)

There is a problem

Razor Pages and MVC 
<nhsuk-error-summary
    heading="There is a problem"
    error-list="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Invalid username or password",
        },
        new ErrorSummaryErrorListItem
        {
            Text = "Agree to the terms of service to log in",
            Href = "#example-terms-of-service",
        },
    ])"
/>
Blazor 
<NhsukErrorSummary
    Heading="@(new ErrorSummaryHeadingOptions
    {
        Text = "There is a problem",
    })"
    ErrorList="@([
        new ErrorSummaryErrorListItem
        {
            Text = "Invalid username or password",
        },
        new ErrorSummaryErrorListItem
        {
            Text = "Agree to the terms of service to log in",
            Href = "#example-terms-of-service",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/error-summary/macro.njk" import errorSummary %}

{{ errorSummary({
  "heading": {
    "text": "There is a problem"
  },
  "errorList": [
    {
      "text": "Invalid username or password"
    },
    {
      "text": "Agree to the terms of service to log in",
      "href": "#example-terms-of-service"
    }
  ]
}) }}