Patterns
When something fails, say what happened in plain words, keep the person’s work, and give them a way forward.
How it works
- Field errors sit under the field; page errors sit in a banner at the top; a failure of one region stays in that region (ErrorBoundary).
- Say what happened, why if known, and what to do next, with Retry where it can help.
- Keep everything the person entered.
- Offer a way to report the problem with a reference id.
See it built: error-boundary full-screen page.
Elements
ErrorBoundary · Banner · Toast · EmptyState · Field · Button
Usability
Do
- Use the error tone only for errors; use warning for things that may become errors.
Don’t
- Don’t show stack traces or codes without a plain explanation.
- Don’t clear a form after a failed submit.
Accessibility
- Errors are announced: an alert for a blocking failure, a polite status for a recoverable one.
- Focus moves to the error summary after a failed submit.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.