Component

Form error message

Use error messages for any form fields.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

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:

• Error-message

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 1
Error 2

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

With dir attribute (preview)

Allows the correct display of right to left languages

An error message displayed right to left

<%= render "govuk_publishing_components/components/error_message", {
  text: "An error message displayed right to left",
  id: "error_id_2",
  right_to_left: true
} %>

With items and dir attribute (preview)

To allow the correct display of right to left languages on error items

Error 1 displayed right to left
Error 2 displayed right to left

<%= render "govuk_publishing_components/components/error_message", {
  right_to_left: true,
  items: [
    {
      text: "Error 1 displayed right to left"
    },
    {
      text: "Error 2 displayed right to left"
    }
  ]
} %>