Error-message examples

Show params

Params

params:
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` argument will be ignored.
- name: id
  type: string
  required: false
  description: Id attribute to add to the error message span tag.
- name: classes
  type: string
  required: false
  description: Classes to add to the error message span tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the error message span tag
- name: visuallyHiddenText
  type: string
  description: A visually hidden prefix used before the error message. Defaults to "Error".

accessibilityCriteria: |
  When used with a single input, the error message MUST:
  - be announced by screen readers when the input is focussed

  When used with a group of multiple inputs (such as within a fieldset), the
  error message MUST:
  - be announced by screen readers when focussing the first input within the
    group (first in this case refers to the focus order, not the DOM - if the
    user is traversing backwards through the page then this would be the last
    input within the group in the DOM)

  When used with a group of multiple inputs, the error message SHOULD NOT:
  - be announced every time for each individual input

default

Error: Error message about full name goes here

Show code

Macro

{% from "components/error-message/_macro.error-message.njk" import componentErrorMessage %}
{{ componentErrorMessage({
  "text": "Error message about full name goes here"
})  }}

Markup

<!-- error-message -->
<p class="block font-semibold text-alert-base">
<span class="sr-only">Error:</span> Error message about full name goes here
</p>
<!-- /error-message -->