Floating labels

Example #

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with our textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="example-input-1" placeholder="name@example.com">
  <label for="example-input-1">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="example-input-2" placeholder="Password">
  <label for="example-input-2">Password</label>
</div>

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

<div class="form-floating">
  <input type="email" class="form-control" id="example-input-3" placeholder="name@example.com" value="steve@apple.com">
  <label for="example-input-3">Email address</label>
</div>

Form validation styles also work as expected.

<div class="form-floating">
  <input type="email" class="form-control is-invalid" id="example-input-4" placeholder="name@example.com" value="steve@apple">
  <label for="example-input-4">Email address</label>
</div>

Textareas #

By default, <textarea> elements with .form-control will be the same height as <input> elements. To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="example-textarea-1"></textarea>
  <label for="example-textarea-1">Comments</label>
</div>
<div class="form-floating">
  <textarea class="form-control" placeholder="Short description" id="example-textarea-2" style="height: 80px;">A short description</textarea>
  <label for="example-textarea-2">Description</label>
</div>

Selects #

Other than .form-control, floating labels are only available on .form-select components. They work in the same way, but unlike <input> tags, they'll always show the <label> in its floated state. Selects with size and multiple are not supported.

<div class="form-floating">
  <select class="form-select" id="example-select-1" aria-label="Area of specialization">
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>
  </select>
  <label for="example-select-1">Area of specialization</label>
</div>

Disabled #

Add the disabled boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="example-input-5" placeholder="name@example.com" disabled>
  <label for="example-input-5">Email address</label>
</div>
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="example-textarea-3" disabled></textarea>
  <label for="example-textarea-3">Comments</label>
</div>
<div class="form-floating">
  <select class="form-select" id="example-select-2" aria-label="Area of specialization" disabled>
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>
  </select>
  <label for="example-select-2">Area of specialization</label>
</div>

Read-only plain text #

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.

<div class="form-floating">
  <input type="email" readonly class="form-control-plaintext" id="example-input-6" placeholder="name@example.com" value="steve@apple.com">
  <label for="example-input-6">Email address</label>
</div>

Input groups #

Floating labels also support .input-group.

<div class="input-group">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="example-input-7" placeholder="Username">
    <label for="example-input-7">Username</label>
  </div>
</div>

When using .input-group and .form-floating along with form validation, the .{valid|invalid}-feedback should be placed outside of the .form-floating, but inside of the .input-group. This means that the feedback will need to be shown using javascript.

<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="example-input-8" placeholder="Username" required>
    <label for="example-input-8">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Layout #

When working with the grid system, be sure to place form elements within column classes.

<div class="row g-3">
  <div class="col-sm">
    <div class="form-floating">
      <input type="email" class="form-control" id="example-input-9" placeholder="name@example.com" value="steve@apple.com">
      <label for="example-input-9">Email address</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="form-floating">
      <select class="form-select" id="example-select-3" aria-label="Area of specialization">
        <option selected>Select an option</option>
        <option value="frontend">Front-end</option>
        <option value="backend">Back-end</option>
        <option value="fullstack">Full-stack</option>
      </select>
      <label for="example-select-3">Area of specialization</label>
    </div>
  </div>
</div>