Error State
States & VariantsThe visual appearance of an element when an error has occurred, typically shown with red color and an error message explaining what went wrong.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Error State coming soon.
How It Works in Apps/Websites
Error states communicate that something went wrong and needs attention. Visual indicators include: red border on inputs, red error text below fields, error icons, and sometimes shake animations. Error messages should be specific and actionable ('Password must be 8+ characters' not 'Invalid password').
How AI Interprets This Term
When you say 'error state', AI expects: red color indication - red border on input (#ef4444), red text for error message below, possibly red X icon. Error message positioned below the element, specific text explaining the issue and how to fix it.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Show an input field in error state with message
Design error states: input with red border (#ef4444), red label, error icon inside input (right), error message text below in red. Message: 'Email address is invalid'. On valid input, smoothly transition to success state.
Show a form field in: default state, error state, and success state
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Form validation failures
- •API errors
- •Required fields missing
- •Invalid input format
When NOT to Use
- •Warnings that don't block progress
- •Optional field suggestions