From the course: UX for Web Forms

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Floating labels

Floating labels - Adobe XD Tutorial

From the course: UX for Web Forms

Start my 1-month free trial

Floating labels

- [Instructor] You may have seen this pattern going around the internet and used on forms. It's where an input appears as if it has placeholder text in it, but when you click or tap into that point, the text moves out of the way and it allows you to type. It's really rather clever. Here's what it looks like. The user would come to the field, type in their information, and when they do so, that what looks like placeholder text actually floats above the text. In this way, you can keep the label visible and also have your placeholder text. There are pros and cons to using this float label technique. The main advantage of this pattern is that the user keeps the field's context after they've focused and entered a value. This provides for a more accessible, less frustrating experience. This pattern also allows for a clean inline label experience by default, and it only becomes a little more cluttered once the user has filled…

Contents