Floating Label Experiment

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 dribbble.

Video demo of floating label experiment in case the gif/code doesn't have full browser support.