Error message

Follow the validation pattern and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.

See the GOV.UK Design System documentation on error messages for more information on when to use this component.

Error:Enter your date of birth

<gv-error-message>Enter your date of birth</gv-error-message>

If you're using components provided by GOV.UK Vue, you won't need to use the error message component directly. Use the error-message prop or slot on the relevant component instead.

You might find this component useful if you're building your own components and you need to show an error message. You'll need to add a <div class="govuk-form-group govuk-form-group--error"> around your component too to show the red border on the left.


text string
Text to use within the error message. If content is provided in the default slot, this prop will be ignored.
id string
ID attribute to add to the error message <p> tag.
visuallyHiddenText string
A visually hidden prefix used before the error message.

Defaults to 'Error'.


The content of the error message. If content is provided in this slot, the text prop will be ignored.