Component
Input Component
Before
After
This input lived inside a modal already packed with information. A validation message sat above it — taking a full line just to say “valid” or “invalid”. We removed it and folded the status into the leading icon with a blur transition, freeing space and adding a small moment of delight.
Blur crossfadeIcons never snap in place. The previous mark blurs out while the next one sharpens in over about 150ms—quick enough to feel immediate, slow enough to feel intentional.
Spinner across the debounceValidation waits ~900ms after input. A spinner in the icon slot covers that window so nothing feels stuck or unresponsive.
Border echoes the iconThe field outline picks up a light green or red tint that matches the icon, so reinforcement stays in one vertical stack—no second line of explanation.