When there’s a value already defined, <label>s will automatically adjust to their floated position.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">

By default, <textarea>s with .form-control will be the same height as <input>s.

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Other than , floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>