Component
Form error summary
Used at the top of the page, to summarise validation errors.
How it looks (preview) (preview all)
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
How to call this component
<%= render "govuk_publishing_components/components/error_summary", {
id: "error-summary",
title: "Message to alert the user to a problem goes here",
description: "Optional description of the errors and how to correct them",
items: [
{
text: "Descriptive link to the question with an error",
href: "#example-error-1"
}
]
} %>
Accessibility acceptance criteria
- should be focused on page load, to ensure this error is noticed by assistive tech
- list of errors should be clickable and focus the inputs with errors
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With many errors (preview)
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
- Descriptive link to the question with an error 1
- Descriptive link to the question with an error 2
- Description of error without link
<%= render "govuk_publishing_components/components/error_summary", {
title: "Message to alert the user to a problem goes here",
description: "Optional description of the errors and how to correct them",
items: [
{
text: "Descriptive link to the question with an error 1",
href: "#example-error-1",
data_attributes: {
tracking: "GTM-123AA"
}
},
{
text: "Descriptive link to the question with an error 2",
href: "#example-error-2",
data_attributes: {
tracking: "GTM-123AB"
}
},
{
text: "Description of error without link",
data_attributes: {
tracking: "GTM-123AC"
}
}
]
} %>
With data attributes (preview)
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
- Descriptive link to the question with an error 1
<%= render "govuk_publishing_components/components/error_summary", {
title: "Message to alert the user to a problem goes here",
description: "Optional description of the errors and how to correct them",
data_attributes: {
tracking: "GTM-123AB"
},
items: [
{
text: "Descriptive link to the question with an error 1"
}
]
} %>
With custom target on links (preview)
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
<%= render "govuk_publishing_components/components/error_summary", {
title: "Message to alert the user to a problem goes here",
description: "Optional description of the errors and how to correct them",
items: [
{
text: "Descriptive link to the question with an error oppening in a new window",
href: "#example-error-1",
target: "_blank"
},
{
text: "Descriptive link to the question with an error oppening in the same window",
href: "#example-error-2",
target: "_self"
}
]
} %>