Back to Dictionary
Empty & Error States
●○○Ready to Use

Error Shake

A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.

Live Demo

What It Is

A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.

✓When to Use

  • Incorrect password entry
  • Form validation failure (empty required field)
  • Declined payment

✕When NOT to Use

  • System-wide crashes (too playful/annoying)
  • Success states

Configuration Tips

  • 01Pair with a red border and a clear text error message
  • 02Keep it fast (around 300ms total)

You've Seen It In

Apple iOSStripe Checkout

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Make the password input shake left and right if it's incorrect.

Code Example (Tailwind CSS)

export function ErrorShake() {}