Customize TextField to Behave Like a Material UI textfield

Hi there,

I’m pretty new to Vaadin and wondered how I could customize a textfield to behave like a Material UI textfield like in this example:

Essentially I want the caption to act as a placeholder and when text is entered the placeholder text transforms into a top caption.

How would I go about that? Do I need to implement a custom widget or can this be achieved by some sort of other customization? Which component created the surrounding divs in the following example? Is that in GWT?


Thanks for your help!

I’d probably subclass the server side class TextField and use a value change listener that sets null placeholder and real caption if the text is not empty, and an empty string (not null to keep the space allocated) as caption for empty text. Unless you need more extensive customizations or the reaction time is too long, it should not be necessary to do custom client side coding.

Another alternative would be an Extension (perhaps even a JavaScriptExtension) that hides the caption with CSS when the text is empty.