Floating Label Experiment

This article was originally published on May 21, 2020

I had a small idea for a simple floating label style that would essentially “clip” the border of the input as the label “floats”. Another key part of the idea was to add a more impactful third state for while the input was focused, I felt that too many of the floating label input patterns out there didn’t emphasize the focused input label enough. I first put it together in Figma and then also coded it out in CSS.

Enjoy the live version below, fork it on codepen, or check it out on dribble.