Google’s open-source text fields

Hi folks,
How can I design my text fields like this in Bubble: https://material.io/develop/web/components/text-fields ?
I have seen this being used on a Webflow site.
Thank you,
LHM.

There are material design plugins that offer this but I found them to be incomplete.

I actually created my own with bubble but it does take a little extra work but it works beautifully.

Basically there are just two elements. An input field and a text field.

  1. “Password” is a text field with a white background that only displays when the input field is focused OR if the input is not empty.

  2. When input field is focused I set the input placeholder text to empty.

This should give you the intended outcome.

1 Like