--- title: "Error message UI: anatomy, variants and examples | Kombai" description: "An error message tells people what went wrong and how to fix it, as close to the problem as it can sit." canonical_url: https://kombai.com/glossary/error-message/ author: "The Kombai Team" --- # Error message An error message tells people what went wrong and how to fix it, as close to the problem as it can sit. - Also called: error state - Platforms: Web, Mobile - In the Kombai gallery: [53 web designs](https://kombai.com/gallery/web/error/), [31 mobile designs](https://kombai.com/gallery/mobile/error/) - [Latitude](https://kombai.com/gallery/inspirations/error-web-7/) (Web) - [Osprey](https://kombai.com/gallery/inspirations/error-ios-5/) (Mobile) - [Halden](https://kombai.com/gallery/inspirations/error-ios-13/) (Mobile) ## 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. ## When to use error message - **Input that fails a check.** A required field left empty, a malformed email or a short password. - **An action that fails.** A declined card, a save that didn't go through or a failed upload. - **A screen that can't load.** A missing page, a lost connection or a server outage. ## When not to use one - **While people are typing.** Don't flag a half-typed email. Check when they submit. - **Warnings and tips.** If nothing failed, use a hint or a notice instead of red. - **Permission or eligibility.** Explain the rule and the next step on a page, not as a field error. ## Anatomy 1. **Field**: A red border marks where 2. **Icon**: A cue beyond color 3. **Message**: What happened and the fix 4. **Summary**: Every error, on submit 5. **States**: Default, error, fixed, focus ## Variants We sorted every error design in the Kombai gallery and found six patterns. ### 1. Inline field errors The default. A red border on the field and one line under it that says what to change. - [Pressleaf](https://kombai.com/gallery/inspirations/error-ios-23/) (Mobile) - [Sableport](https://kombai.com/gallery/inspirations/error-web-49/) (Web) - [Alderbay Host](https://kombai.com/gallery/inspirations/error-web-38/) (Web) ### 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. - [Tonewell](https://kombai.com/gallery/inspirations/error-ios-31/) (Mobile) - [Moneta](https://kombai.com/gallery/inspirations/error-web-10/) (Web) - [Almanac](https://kombai.com/gallery/inspirations/error-web-12/) (Web) ### 3. Full-page errors Server errors, crashes and lost connections take over the screen with an illustration, a short explanation and a reload button. - [Clipwave](https://kombai.com/gallery/inspirations/error-web-6/) (Web) - [Brinewell](https://kombai.com/gallery/inspirations/error-ios-28/) (Mobile) - [Animora](https://kombai.com/gallery/inspirations/error-web-5/) (Web) ### 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. - [Zentro](https://kombai.com/gallery/inspirations/error-ios-4/) (Mobile) - [Cordwell](https://kombai.com/gallery/inspirations/error-web-47/) (Web) - [Verdel](https://kombai.com/gallery/inspirations/error-ios-15/) (Mobile) ### 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. - [Veyra](https://kombai.com/gallery/inspirations/error-ios-2/) (Mobile) - [Halcyon](https://kombai.com/gallery/inspirations/error-ios-19/) (Mobile) - [Fernpost](https://kombai.com/gallery/inspirations/error-web-13/) (Web) ### 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. - [Ashvale](https://kombai.com/gallery/inspirations/error-web-33/) (Web) - [Inkstone](https://kombai.com/gallery/inspirations/error-web-3/) (Web) - [Forkful](https://kombai.com/gallery/inspirations/error-ios-8/) (Mobile) ## 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. - [Plinth](https://kombai.com/gallery/inspirations/error-web-25/) (Web) - [Velvio](https://kombai.com/gallery/inspirations/error-ios-11/) (Mobile) - [Perch](https://kombai.com/gallery/inspirations/error-web-32/) (Web) ### Payments and checkout Declined and unsupported cards, and amounts over the balance, with a way to pay another way. - [Hatchmark](https://kombai.com/gallery/inspirations/error-web-53/) (Web) - [Craftlane](https://kombai.com/gallery/inspirations/error-web-9/) (Web) - [Wrenfield](https://kombai.com/gallery/inspirations/error-ios-24/) (Mobile) ### Codes and identity checks Codes that don't match and documents or addresses that can't be verified, each with a retry. - [Bramble](https://kombai.com/gallery/inspirations/error-web-30/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/error-ios-26/) (Mobile) - [Fernpay](https://kombai.com/gallery/inspirations/error-ios-9/) (Mobile) ## Error message vs similar components | | [Error message](https://kombai.com/glossary/error-message/) | [Toast notification](https://kombai.com/glossary/toast-notification/) | [Empty state](https://kombai.com/glossary/empty-state/) | [Dialog](https://kombai.com/glossary/dialog/) | |---|---|---|---|---| | Says | What failed and how to fix it | A brief update | Why nothing is here | A question or a task | | Stays | Until the problem is fixed | A few seconds | Until content is added | Until people answer | | Best for | Bad input and failed actions | Confirming a finished action | Lists with no data yet | Decisions that block the flow | ## 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 - [Form](https://kombai.com/glossary/form/) - [Text field](https://kombai.com/glossary/text-field/) - [Empty state](https://kombai.com/glossary/empty-state/) - [Toast notification](https://kombai.com/glossary/toast-notification/) ## References - [GOV.UK Design System: Error message](https://design-system.service.gov.uk/components/error-message/) - [GOV.UK Design System: Error summary](https://design-system.service.gov.uk/components/error-summary/) - [GOV.UK Design System: Validation pattern](https://design-system.service.gov.uk/patterns/validation/) - [MDN: aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid)