Skip to main content

Error message examples

  • # default

    Open this example in a new tab: button

    Error: Error message about full name goes here 

    {
  "text": "Error message about full name goes here"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "text": "Error message about full name goes here"
}) }}

  • # translated

    Open this example in a new tab: button

    Gwall: Neges gwall am yr enw llawn yn mynd yma 

    {
  "visuallyHiddenText": "",
  "html": "<span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "visuallyHiddenText": "",
  "html": "<span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma"
}) }}

  • # id

    Open this example in a new tab: button

    Error: This is an error message 

    {
  "id": "my-error-message-id",
  "text": "This is an error message"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "id": "my-error-message-id",
  "text": "This is an error message"
}) }}

  • # classes

    Open this example in a new tab: button

    Error: This is an error message 

    {
  "classes": "custom-class",
  "text": "This is an error message"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "classes": "custom-class",
  "text": "This is an error message"
}) }}

  • # html as text

    Open this example in a new tab: button

    Error: Unexpected > in body 

    {
  "text": "Unexpected > in body"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "text": "Unexpected > in body"
}) }}

  • # html

    Open this example in a new tab: button

    Error: Unexpected bold text in body copy 

    {
  "html": "Unexpected <b>bold text</b> in body copy"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "html": "Unexpected <b>bold text</b> in body copy"
}) }}

  • # attributes

    Open this example in a new tab: button

    Error: This is an error message 

    {
  "text": "This is an error message",
  "attributes": {
    "data-test": "attribute",
    "id": "my-error-message"
  }
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "text": "This is an error message",
  "attributes": {
    "data-test": "attribute",
    "id": "my-error-message"
  }
}) }}

  • # with visually hidden text

    Open this example in a new tab: button

    Gwall: Rhowch eich enw llawn 

    {
  "text": "Rhowch eich enw llawn",
  "visuallyHiddenText": "Gwall"
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "text": "Rhowch eich enw llawn",
  "visuallyHiddenText": "Gwall"
}) }}

  • # visually hidden text removed

    Open this example in a new tab: button

    There is an error on line 42 

    {
  "text": "There is an error on line 42",
  "visuallyHiddenText": ""
}
    
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  "text": "There is an error on line 42",
  "visuallyHiddenText": ""
}) }}