Bootstrap 5 Form Floating Labels

Floating Labels / Animated Labels

Floating labels in forms refer to a design pattern where the label "floats" above the input field when the user engages with the form.

By default, when using labels, they normally appear on top of the input field:

Example

<div class="form-floating mb-3 mt-3">
 <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
  <label for="email">Email</label>
</div>

<div class="form-floating mt-3 mb-3">
 <input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
  <label for="pwd">Password</label>
</div>

You can click on above box to edit the code and run again.

Output

Textarea

Comments

Example

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">Comments</label>
</div>

You can click on above box to edit the code and run again.

Output

Select Menus

You can also use "floating-labels" on select menus. However, they will not float/get animated. The label will always appear in the top left corner, inside the select menu:

Example

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
   <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
 <label for="sel1" class="form-label">Select list (select one):</label>
</div>

You can click on above box to edit the code and run again.