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)

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

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"
    }
  ]
} %>

With dir attribute (preview)

Allows the correct display of right to left languages

Error: 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: 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"
    }
  ]
} %>