1

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.

2

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.

Screen Shot 2020-09-27 at 12.28.30 PM
Screen Shot 2020-09-27 at 12.28.30 PM868×402 5.68 KB

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.

    Screen Shot 2020-09-27 at 12.34.08 PM
    Screen Shot 2020-09-27 at 12.34.08 PM678×1014 63.4 KB

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

    Screen Shot 2020-09-27 at 12.32.43 PM
    Screen Shot 2020-09-27 at 12.32.43 PM678×970 51.8 KB

This should give you the intended outcome.

1 Like