Text field with floating labels

You where heading in the right direction, you just needed to add some conditions for if the input field wasn’t empty.

  1. Input text is getting smaller after type something in and deselect the field. I’ve tried to change the style effects but still doesn’t work.

Your Focused Style is different that the input’s regular style:

  1. I don’t know how to make the X icon only appears after start typing something (not showing up when the field got focused but nothing puts in).

The “Text Changed” interaction can help you here:
image

  1. The floating label should be grey when something has been put in and the field lost focus.

You had a condition for if the field was empty but there wasn’t one for it not being empty.
input field.rp (140.7 KB)

1 Like