How to create a custom text field with floating label

I have been trying to create own text field with floating label.

I used 2 container states, one for the default state and one for the state where the label moves above the text field on focus from the first state.

The issue I am having is when I press and release the delete key to remove individual characters from the second state, it switches back to the first state unless I delete all the text without releasing the delete key.

How do I keep the state from changing while deleting characters one at a time...

Basically I am trying to recreate the proto.io material text field with floating labels because of the lack of customization.

So the question is, how do I clear a text field one character at a time and change the state once the text field is empty?

Any help would be greatly appreciated. Is there a tutorial on how to create a custom text field with floating label?


Here is a codepen sample of what I am trying to achieve


Thank you in advance!




1 comment

Please sign in to leave a comment.