Create Animated Input Field Floating Label UI With Latest Tailwindcss v2.2.0

[@Laratips]

When you write some text in the input and then click on the outside, the label will overlap the text. To fix this you need some JavaScript. Thanks, Aashiq Aasnat for pointing it out.
You need to first add and id to the label as 'username-label', then you can add this in the JavaScript. This code is just adding and removing some classes depending on the value of the input.
let label = document.getElementById('username-label');
document.getElementById('username')
.addEventListener('input', event => {
let input = event.target;
if (event.target.value) {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.add(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.add(c));
} else {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.remove(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.remove(c));
}
})

[@danuhandika8328]

you are the good man bro, thanks

[@psyferinc.3573]

i wish you helped with the js code too. im new to design so the js behind it is still rough

[@AnkurRajbongshi-u1q]

Thanks a lot.... This is step-by-step kind info.

[@sharmajikaladka836]

Daaami ❤️. Feri yesto dami dekhkhiyo bhane hanuwla subscribe

[@penksantuyyy9519]

Thankns for the video, you saved my day

[@Laratips]

You are most welcome

[@MrSonicastra]

Thanks for this video!

[@Laratips]

You are welcome

[@therevealmusic]

how can we do this to a drop down select

[@karlnewgrove]

Instead of a JavaScript solution for the overlapping texts, another alternative would be to use the peer-placeholder-shown pseudo-class:
text-xs
peer-focus:text-xs
peer-placeholder-shown:text-base
Then just use an empty placeholder in the input field: placeholder=" "

[@Laratips]

Wow. I will try this. Thanks

[@michaelfestus3619]

Please can you explain better

[@karlnewgrove]

​@@michaelfestus3619 The solution is from Tailwind's TH-cam channel: th-cam.com/video/nJzKi6oIvBA/w-d-xo.html

[@shahchandan1369]

Can you please explain better

[@karlnewgrove]

Add placeholder=" " to (the empty space is important). Then use peer-placeholder-shown and peer-focus on . This enables the label to be used as both the placeholder and the label. Example: .

[@aashiq_hasnat]

So you didn't show what happens after you write something on the input, label overlap with the input text. plz fix it

[@Laratips]

Oh yes thanks for the feedback. It looks like a little bit tricky. I will try to fix it and pin the fix in the comment.

[@Laratips]

It looks like we need some JavaScript to accomplish this:
You need to first add and id to the label as 'username-label', then you can add this in the JavaScript. This code is just adding and removing some classes depending on the value of the input.
let label = document.getElementById('username-label');
document.getElementById('username')
.addEventListener('input', event => {
let input = event.target;
if (event.target.value) {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.add(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.add(c));
} else {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.remove(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.remove(c));
}
})

[@nicholassingh138]

Can this work for textarea?

[@Laratips]

It should work.