---
title: "Keep errors that need action on screen · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/errors-stay-on-screen
updated: 2026-10-20
licence: "All rights reserved"
---

# Keep errors that need action on screen

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Feedback and dialogs](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs)
- Rule: Show an error that people must act on next to its cause, and keep it until it is fixed. Never put it only in a toast that disappears.
- How: A failed save, a payment that needs a new card or an import with bad rows needs a fix, so it stays. Put form errors next to fields, as [form errors](https://agentwranglers.se/playbook/website/accessibility/form-errors) describes. Put errors for a whole screen in a banner at the top of the main area, with `role="alert"` only when it appears after an action. Say what happened and what to do next.
- Check: A browser test makes a save fail. After 30 seconds the error text is still visible and names the next step.

Example:

```html
<div role="alert" class="screen-error">
  <p>Your card was declined, so the subscription is paused.</p>
  <a href="/billing/card">Update your card</a>
</div>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/errors-stay-on-screen`.

- Previous: [Use toasts only to confirm finished work](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/toasts-for-status)
- Next: [Put focus somewhere sensible after every change](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/managed-focus)
- [Feedback and dialogs](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs)