Error summary

Read more about the error summary component on the Gov.UK Design System website

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkErrorSummary(new ErrorSummaryViewModel
{
    Title = new HtmlOrText("There is a problem"),
    Errors = new List<ErrorSummaryItemViewModel>
    {
        new ErrorSummaryItemViewModel
        {
            HtmlOrText = new HtmlOrText("Enter your full name"),
            Href = "#"
        },
        new ErrorSummaryItemViewModel
        {
            HtmlOrText = new HtmlOrText("The date your passport was issued must be in the past"),
            Href = "#"
        },
    }
})

Options

Options for ErrorSummaryViewModel

Name	Type	Description
Title	HtmlOrText	Required. HTML or text to use for the heading of the error summary block.
Description	HtmlOrText	HTML or text to use for the description of the errors.
Errors	List<ErrorSummaryItemViewModel>	A list of errors to include in the error summary. See options for ErrorSummaryItemViewModel
DisableAutoFocus	bool	Prevent moving focus to the error summary when the page loads.
Classes	List<string>	Classes to add to the error-summary container.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the error-summary container.

Options for ErrorSummaryItemViewModel

Name	Type	Description
Href	string	Href attribute for the error link item. If provided item will be an anchor.
HtmlOrText	HtmlOrText	Required. HTML or text for the error link item.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the error link anchor.

Examples

Linking from the error summary to each answer

Example with text input component

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkFieldset(new FieldsetViewModel
{
    Legend = new FieldsetLegendViewModel
    {
        HtmlOrText = new HtmlOrText("Your details"),
        IsPageHeading = true,
        Classes = ["govuk-fieldset__legend--l"]
    },
    HtmlOrText = new HtmlOrText(
        @<text>
            @await Html.GovUkTextInput(new TextInputViewModel
            {
                Name = "full-name",
                Label = new LabelViewModel
                {
                    HtmlOrText = new HtmlOrText("Full name"),
                },
                ErrorMessage = new ErrorMessageViewModel
                {
                    HtmlOrText = new HtmlOrText("Enter your full name")
                }
            })
         </text>)
})

Example with checkboxes component

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkErrorSummary(new ErrorSummaryViewModel
{
    Title = new HtmlOrText("There is a problem"),
    Errors = new List<ErrorSummaryItemViewModel>
    {
        new ErrorSummaryItemViewModel
        {
            HtmlOrText = new HtmlOrText("Select the cities you are travelling to, or None"),
            Href = "#city"
        },
    }
})

@await Html.GovUkCheckboxes(new CheckboxesViewModel
{
    Name = "city",
    Fieldset = new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Which cities are you travelling to?"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        }
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Select all that apply")
    },
    CheckboxItems = new List<CheckboxItemViewModel>
    {
        new CheckboxItemViewModel
        {
            Value = "paris",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Paris")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of France")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "lisbon",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Lisbon")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of Portugal")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "madrid",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Madrid")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of Spain")
            }
        },
        new CheckboxItemViewModel
        {
            Divider = "or"
        },
        new CheckboxItemViewModel
        {
            Value = "none",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("None")
            },
            Exclusive = true
        },
    },
    ErrorMessage = new ErrorMessageViewModel
    {
        HtmlOrText = new HtmlOrText("Select the cities you are travelling to, or None")
    }
})