Error messages from the Kombai gallery: a hiring platform's failed log-in, a fintech app's mismatched code and an onboarding form's missing name.
What is an error message?
An error message appears when something can't go through: a field is empty or malformed, a card is declined, a page won't load. It names the problem in plain words, sits as close to the cause as it can and says what to do next.
- Field errors sit next to the field, with a red border and an icon, so color is not the only cue.
- Problems people can't fix in place, like an outage, get a dialog or a page of their own.
Error messages show up across sign-in, checkout, verification and 404 screens.
When to use an error message
- Input that fails a checkA required field left empty, a malformed email or a short password.
- An action that failsA declined card, a save that didn't go through or a failed upload.
- A screen that can't loadA missing page, a lost connection or a server outage.
When not to use one
- While people are typingDon't flag a half-typed email. Check when they submit.
- Warnings and tipsIf nothing failed, use a hint or a notice instead of red.
- Permission or eligibilityExplain the rule and the next step on a page, not as a field error.
Anatomy of an error message
This one works. Press Create account, follow a link in the summary, fix the field and submit again.
- Default
- Error
- Fixed
- Keyboard focus
- FieldA red border marks where
- IconA cue beyond color
- MessageWhat happened and the fix
- SummaryEvery error, on submit
- StatesDefault, error, fixed, focus
Error message variants
We sorted every error design in the Kombai gallery and found six patterns. Browse all 53 web and 31 mobile designs.
1. Inline field errors
The default. A red border on the field and one line under it that says what to change.
2. Form banners
One message across the top of a form or dialog, for problems that belong to no single field, like a card that wasn't authorized.
3. Full-page errors
Server errors, crashes and lost connections take over the screen with an illustration, a short explanation and a reload button.
4. Error dialogs and sheets
A modal or bottom sheet that stops the flow, says what failed and offers Try again or a way out.
5. Errors inside a working screen
One part fails while the rest still works: a list that won't load, a reply that broke off or a campaign with no recipient.
6. Access and permission errors
A private document, a workspace people are not in or a denied location permission, each with a way to ask or change it.
Where error messages show up
Sign-in and sign-up
Wrong passwords, unknown emails and handles that are already taken, shown right at the field.
Payments and checkout
Declined and unsupported cards, and amounts over the balance, with a way to pay another way.
Codes and identity checks
Codes that don't match and documents or addresses that can't be verified, each with a retry.
Error message vs similar components
Build notes
- Put the message next to its field, link it with aria-describedby and set aria-invalid="true".
- Say what went wrong and how to fix it. Skip jargon, error codes and blame.
- Pair red with an icon or a hidden "Error:" prefix, so color is not the only cue (WCAG 1.4.1).
- On submit, show an error summary at the top, link each error to its field and move focus to it.
- Validate on submit, not while people type, and never clear the fields that failed.
- Announce errors that appear without a page load, like a failed save, with role="alert".
FAQ
When should a form show validation errors?
When people submit or try to move on, not as they leave each field. The GOV.UK validation pattern says to wait for the Continue or Submit button, and warns that checking a field before it's finished causes problems, especially for people who type slowly.
What makes a good error message?
It says what happened and how to fix it, in plain words: 'Enter your first name' beats 'This field is required'. Leave out jargon and error codes, and don't blame people with phrases like 'you forgot'.
Do error messages have to be red?
Red is the convention, but color alone isn't enough. WCAG 1.4.1 asks for another cue, so pair red with an icon, a thicker border or the word Error for screen readers.
When does an error need its own page?
When people can't fix the problem from where they are: a missing page, an outage or a permission they don't have. Explain what happened on a page of its own and give them a next step, like going back or asking for access.
Related terms
All glossary terms · Browse 53 web and 31 mobile error message designs