0

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

https://codepen.io/simoberny/pen/gpddYQ 

Thank you in advance!

-Michael

 

 

1 comment

Please sign in to leave a comment.