Validate
No library Intermediate
A right-side icon morphs between states: invisible on idle, a checkmark springs in on valid email format, an X shakes in on invalid submission attempt.
A right-side icon morphs between states: invisible on idle, a checkmark springs in on valid email format, an X shakes in on invalid submission attempt.
Goal: Create a "Validate" email input with animated state icon.
Visual behavior: An email input field with a small icon slot on the right (always takes up space, opacity transitions in/out). States:
- Idle (empty): icon invisible
- Valid email typed: green checkmark icon scales in (scale 0→1, spring-like cubic-bezier), border turns green
- Invalid on submit: red X icon appears with a shake animation (translateX zigzag, 400ms), border turns red
Trigger: a Submit button below the input attempts validation and sets the error state.
Technique:
- Regex: /^[^s@]+@[^s@]+.[^s@]+$/ for validation
- icon div: opacity + transform transitions based on state; shake uses CSS @keyframes via a key counter
- Border color transition on the input: 200ms ease
- aria-invalid attribute set on error
Accessibility: Icon shake disabled under prefers-reduced-motion. aria-invalid communicates the error state to assistive tech.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.