Text field with floating labels

[xingyu1088]

I’m trying to make a floating label text field using the condition builder but always have bugs and don’t know how to fix them. Please check out the attachment.

Issues:

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.
2. 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).
3. The floating label should be grey when something has been put in and the field lost focus.

input field.rp (88.6 KB)

[huban]

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:

2. 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:

3. 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)

[xingyu1088]

Thank you so much! Your answer is very comprehensive and helpful!