Floating Labels on Bootstrap 5 isn't working

Question

My floating labels aren't working, can someone help me?

Code

<div class="form-floating mb-3">
    <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
    <label for="txtNome">Full Name</label>
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" autofocus id="txtEmail" 
        placeholder=" ">
    <label for="txtEmail">E-mail</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control" id="txtMensagem" placeholder=" " 
              style="height: 200px;"></textarea>
    <label for="txtMensagem">Message</label>
</div>

Answer 1

I was also stuck with the same problem.

I don't know if the code you actually use is the one you attached, but I saw that in my case the lack of the placeholder attribute did not allow the animation of the labels (see docs).

A placeholder is required on each as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the must come first so we can utilize a sibling selector (e.g., ~).

This does not work:

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="username">
    <label for="username">Username</label>
</div>

This works:

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="username" placeholder="">
    <label for="username">Username</label>
</div>

If you don't need the attribute you can set it to an empty string.

Tested on Bootstrap version 5.3.x.