Components
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.
<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.
Props
| Name | Type | Description |
|---|---|---|
| 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'. |
Slots
| Name | Description |
|---|---|
| default | The content of the error message. If content is provided in this slot, the text prop will be ignored. |