Bootstrap 5 floating labels in an input group

I'm wanting to use Bootstrap's "Floating Label" and "Input Group" components together. The trouble I'm having is that the label is hidden when the input is focused. In my code example below, I have these scenarios:

Both components (see that the label disappears when clicking in the input).
Floating label only

Does anyone know of a way to make these components work together?

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-floating input-group mb-3">
    <input type="text" class="form-control" name="code1" placeholder="Code 1">
    <label for="code1">Code 1</label>
    <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

<div class="form-floating mb-3">
    <input type="text" class="form-control" name="code4" placeholder="Code 4">
    <label for="code4">Code 4</label>
</div>

Place the floating label inside another input-group div.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

To improve the answer by @Unmitigated I ended up removing the radius for both right-hand corners of the input.

.form-floating-group input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating form-floating-group flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

Bootstrap 5 floating labels in an input group

Related

Recent Posts