1. Government Frontend Component Guide
  2. Form error message

Component

Form error message

Use error messages for any form fields.

How it looks (preview all)

Error: Please enter your National Insurance Number

How to call this component

<%= render "govuk_publishing_components/components/error_message", {
  text: "Please enter your National Insurance Number",
  id: "error_id"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

All text must have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Error message must:

  • be associated with an input. The error_message_id must match the aria-describedby property on the input your label is associated with. Note that if id is not passed to the component an id will be generated automatically.

If error message is within a label it will be announced in its entirety by screen readers. By associating error messages with inputs using aria-describedby, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight.

Other examples

With items (preview)

Error items are a common pattern where a collection of error is passed with each item having a text attribute of the error

Error: Error 1
Error 2
<%= render "govuk_publishing_components/components/error_message", {
  items: [
    {
      text: "Error 1"
    },
    {
      text: "Error 2"
    }
  ]
} %>