Floating label on outline input field
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
Do you mean like a placeholder text that disappears or moves when the user starts typing, or something else?
Do you mean like a placeholder text that disappears or moves when the user starts typing, or something else?
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.
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.
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.
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.
Thank you so much Danielle! Really appreciate your help. :-)
Thank you so much Danielle! Really appreciate your help. :-)
Replies have been locked on this page!