import { ReactNode } from 'react';
export interface ErrorMessageProps {
    id?: string;
    children?: ReactNode;
    classBlock?: string;
    classModifiers?: string | string[] | null;
    className?: string;
}
export declare const DEFAULT_CLASS = "govuk-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.


## When to use this component

Show an error message next to the field and in the [error summary],
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:
- [‘there is a problem with the service’ pages]
- [‘page not found’ pages]
- [‘service unavailable’ pages]


## How it works

For each error:
- put the message in red after the question text and hint text
- use a red border to visually connect the message and the question it belongs
  to
- if the error relates to a specific field within the question, give it a red
  border and refer to that field in the error message - for example: “you must
  enter a year”

To help screen reader users, the error message component includes a hidden
‘Error:’ before the error message. These users will hear, for example, “Error:
The date your passport was issued must be in the past”.


### Be clear and concise

Describe what has happened and tell them how to fix it. The message must be in
plain English, use positive language and get to the point.

Do not use:
- technical jargon like ‘form post error’, ‘unspecified error’ and ‘error
  0x0000000643’
- words like ‘forbidden’, ‘illegal’, ‘you forgot’ and ‘prohibited’
- ‘please’ because it implies a choice
- ‘sorry’ because it does not help fix the problem
- ‘valid’ and ‘invalid’ because they do not add anything to the message
- humorous, informal language like ‘oops’

Do not give an example in the error message if there is an example on the
screen. For example, if you are asking for a National Insurance number and
include ‘QQ 12 34 56 C’ as hint text, do not include an example in the error
message.

Above all, aim for clarity.

Read the message out loud to see if it sounds like something you would say.


### Be consistent

Use the same message next to the field and in the [error summary] so they:
- look, sound and mean the same
- make sense out of context
- reduce the cognitive effort needed to understand what has happened

Use the question or form label in the error to provide context. For example,
‘Enter how many hours you work a week’ for ‘How many hours do you work a week?’


### Be specific

General errors are not helpful to everyone. They do not make sense out of
context. Avoid messages like:
- ‘An error occurred’
- ‘Answer the question’
- ‘Select an option’
- ‘Fill in the field’
- ‘This field is required’

Different errors need different messages. For example, text fields may be:
- empty
- too long
- too short
- using characters that are not allowed
- in the wrong format

An error for a specific situation is more helpful. It will tell someone what has
happened and how to fix it.


### Use instructions and descriptions

Some errors work better as instructions and some work better as descriptions.
For example:
- ‘Enter your first name’ is clearer, more direct and natural than ‘First name
  must have an entry’
- ‘Enter a first name that is 35 characters or fewer’ is wordier, less direct
  and natural than ‘First name must be 35 characters or fewer’
- ‘Enter a date after 31 August 2017 for when you started the course’ is
  wordier, less direct and natural than ‘Date you started the course must be
  after 31 August 2017’

Use both instructions and descriptions, but use them consistently. For example,
use an instruction for empty fields like ‘Enter your name’, but a description
like ‘Name must be 35 characters or fewer’ for entries that are too long.


### Use error message templates

Use template messages for common errors on:
- [addresses]
- [character count]
- [checkboxes]
- [date input]
- [ethnic group]
- [email address]
- [file upload]
- [names]
- [National Insurance numbers]
- [radios]
- [telephone numbers]
- [text input]
- [textarea]


### Track errors

Find out how often people see them. This will let you:
- improve content
- A/B test variations
- redesign a journey


[validation pattern]: https://design-system.service.gov.uk/patterns/validation/
[error summary]: https://design-system.service.gov.uk/components/error-message/
[‘there is a problem with the service’ pages]: https://design-system.service.gov.uk/patterns/problem-with-the-service-pages/
[‘page not found’ pages]: https://design-system.service.gov.uk/patterns/page-not-found-pages/
[‘service unavailable’ pages]: https://design-system.service.gov.uk/patterns/service-unavailable-pages/
[addresses]: https://design-system.service.gov.uk/patterns/addresses/#error-messages
[character count]: https://design-system.service.gov.uk/components/character-count/#error-messages
[checkboxes]: https://design-system.service.gov.uk/components/checkboxes/#error-messages
[date input]: https://design-system.service.gov.uk/components/date-input/#error-messages
[ethnic group]: https://design-system.service.gov.uk/patterns/ethnic-group/#error-messages
[email address]: https://design-system.service.gov.uk/patterns/email-addresses/#error-messages
[file upload]: https://design-system.service.gov.uk/components/file-upload/#error-messages
[names]: https://design-system.service.gov.uk/patterns/names/#error-messages
[National Insurance numbers]: https://design-system.service.gov.uk/patterns/national-insurance-numbers/#error-messages
[radios]: https://design-system.service.gov.uk/components/radios/#error-messages
[telephone numbers]: https://design-system.service.gov.uk/patterns/telephone-numbers/#error-messages
[text input]: https://design-system.service.gov.uk/components/text-input/#error-messages
[textarea]: https://design-system.service.gov.uk/components/textarea/#error-messages
*/
export declare const ErrorMessage: ({ children, classBlock, classModifiers, className, ...attrs }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;