We use the Material Design underline text fields with floating labels in our application (see right on the picture).

This works well on mobile, but for long forms on a desktop a label to the left of the field would be more beneficial (see left on the picture). Scanning would be easier especially in cases where the fields are already filled out. It would also require less vertical space making the form less long.

enter image description here

My question now is, is this a conventional user-friendly pattern? Or are the underline fields for some reason not to be used with left labels (I couldn't find it anywhere)?

Thanks for your input.


I worked on it recently for my company. Long form with some UX problems in it. We (The UI team and me) choosed to have 2 differents designs (1 for mobile and the other one for desktop)

The mobile is the one you already have (google thing, works really well, good micro-interaction and the room for visual feedback all the way along the user journey).

The desktop is more "Classic", we will use "boxes" with the title of the section at the top left of the box. This is more adapted to the web "classic" standard and you can still display a lot of nice micro-interaction and visual feedbacks to make your users understand what they're doing.

Still, We will test it and probably do some modifications for it using hotjar (observation of user sessions AND data about each field like time spending filling it and number of time re-filling it) and Google Analytics (Conversion rates depending on the country, etc...).

This is just an input, not a "Do as I say" thing. I worked on the concept for quite some time, will test it soon enough to have feedback about it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.