Float label pattern in UX form design
CanvasFlip
4.2K25

It seems that wrapping label and input with a border alone does the trick. I’m thinking of the principle of proximity here. The animation is the icing on the cake.

It should be noted that afaik placeholders cannot be animated and they also cannot be clicked, because a placeholder is an attribute to the field, not a pseudo or real element like a label.

With a floating label that sits inside the field, one is taking away the visual space that’s initially reserved for the placeholder. The placeholder should give the user an additional help for filling out the field.

Other than that, if cleverly used, I like it!
Just my 2 cents.

Thank you for publishing this article.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.