---
title: Error Message
status: decided
type: baseline/pattern
depends_on:
  - foundation/voice
  - foundation/emotional-modes
last_verified: 2026-03-26
---

# Felmeddelande

## När du behöver det

Något gick fel — ett formulärfält, en uppladdning, ett systemanrop. Användaren behöver förstå vad som hänt och vad de kan göra åt det.

## Principen

Ett fel skapar en kort ångesttopp. Den nära experten lämnar aldrig någon i det läget utan nästa steg. Felmeddelandet förklarar vad som hände och vad användaren kan göra nu — inte vad systemet tycker om situationen.

## Strukturen

1. **Vad hände** — kort, konkret, utan teknisk jargong
2. **Vad du kan göra** — ett tydligt nästa steg

Aldrig bara "Något gick fel." Aldrig utan en väg framåt.

## Exempel

✅ "E-postadressen ser inte komplett ut. Kontrollera att den innehåller @."

✅ "Den filen kan vi inte ta emot. Ladda upp som PDF, JPG eller PNG (max 10 MB)."

✅ "Vi kunde inte spara dina uppgifter. Kontrollera din uppkoppling och försök igen — dina svar är inte förlorade."

❌ "Ogiltigt filformat."

❌ "Ett fel uppstod. Försök igen."

❌ "Error 500."

Det viktigaste efter "vad hände": lugna oron. "Dina svar är inte förlorade" gör mer för patienten än den tekniska förklaringen.

## Tokens

| Token | Roll |
|-------|------|
| `--input-error-color` | Textfärg för felmeddelande |
| `--input-error-border` | Kantfärg på fältet |
| `--text-error` | Status-error (#C14444) |
| `--font-size-xs` | Storlek (14px) |

## Tillgänglighet

Felmeddelandet placeras direkt under fältet det gäller — inte i en modal, inte i en banner högst upp. Använd `aria-describedby` för att koppla meddelandet till fältet så att skärmläsare hittar det. Formuläret ska aldrig låsas vid fel — användaren korrigerar och försöker igen.

## Snabbtest

**Vet användaren vad de ska göra härnäst?** Om inte — skriv om.