Floating label on outline input field

Claire White shared this problem 14 months ago
Solved

Hi there,

Just wondered if anyone had any suggestions for creating a floating label on an outlined input field - see material design styles in the URL.

https://material-components.github.io/material-components-web-catalog/#/component/text-field

Comments (5)

photo
1

Do you mean like a placeholder text that disappears or moves when the user starts typing, or something else?

photo
1

Hello Danielle, thanks for your reply. Yes, the behaviour I am trying to emulate is to float the placeholder text when the user starts typing within an outlined input field. Screenshots attached. This is one of the components from Google's material design. I can emulate the behaviour for an underlined style but stuck on how to do this on a text field with a border.

photo
2

We can add a few events that move a text onto the top of the border, and then hide it when you focus out - in addition to some 'change style' events. Check out the attached prototype.

photo
1

Thank you so much Danielle! Really appreciate your help. :-)

photo
1

Glad to help! Please let me know if there's anything else we can assist with.

photo