How to create fancy jumping text input labels

GIF animation of a floating text input label

The jumping placeholders labels are now more or less the standard in web forms. It seemingly feels like the input label is jumping. There are, of course, numerous variations of this thing, but it generally works in the same way. Whenever such input is empty, the placeholder label sits with prominent characters to inform users what kind of value the particular text input is expecting. Once the text input gains focus, the placeholder label jumps up on top and zooms out. It now serves as a reminder of what information the user entered rather than hinting the user what information to fill in. It has evolved.

This technique is an example of a progressive UX. The label diminishes in importance after the user has progressed in filling out the form. I like these kinds of UX effects. It’s as if the guiding elements in the UI tries to get out the user’s way once they’ve served their purpose. Older guiding elements fade into the background, and new indicators are allowed to take center stage.

This effect has also met some critique. This article lists the drawbacks of using the method. As always, whatever you create depends on the context. The jumping label is not for every situation.

landing in pockets

This article looks into one of my Codepen demos using the jumping text labels. This demo…