use CSS :has() & :user-valid/invalid to power form micro-interactions .group:has(:valid) { --color: var(--valid); } input:user-invalid + .error { display: block; } :user-valid/invalid detects if an input is valid and if it has been interacted with 🔥 no js dirty checkin' 🤙

here's the @CodePen link! 🚀 got a request for this in "the other place™" so threw together a new demo now that :user-valid/invalid has good support 🙌

Beautiful 👏

Bro you’re cooking on thanksgiving? Love it

not now - i'm waitin' for the cookin' 💀 got the game on, Steam Deck in hand 😇

Really sweet animation. Bookmarked.

How did you do the grid pattern?

Hats off to you! 🎩

That's so beautiful bro🤝

I love your design I try to make it useing ai but I can’t can you give me any idea ?

Would be cool to have a CSS only solution for different error messages depending on the input.