Error message

Standard

Default

The default error message uses a visually hidden prefix of "Error:".

Error: Error message about full name goes here

Show code

HTML
Astro
React
Svelte
Solid

<p class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span>
  Error message about full name goes here
</p>

---
import { ErrorMessage } from "@i-dot-ai-npm/component-library-astro";
---

<ErrorMessage>Error message about full name goes here</ErrorMessage>

import { ErrorMessage } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ErrorMessage>Error message about full name goes here</ErrorMessage>
  );
}

<script>
  import { ErrorMessage } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ErrorMessage>Error message about full name goes here</ErrorMessage>

import { ErrorMessage } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ErrorMessage>Error message about full name goes here</ErrorMessage>
  );
}

When to use this component

Show an error message next to the field and in the Error summary component when there is a validation error.

Use standard messages for different components.

When not to use this component

Do not use error messages to tell a user that they are not eligible or do not have permission to do something. Or to tell them about a lack of capacity or other problem the user cannot fix - because the problem is with the service rather than with the information the user has provided.

Instead, take the user to a page that explains the problem (for example, telling them why they’re not eligible) and provides useful information about what to do next.

There are separate patterns for: