Floating Labels

Floating labels sit inside the field and move up once a value is entered, saving vertical space in sign-in, checkout and contact forms.

1Email and password

The classic pair; the placeholder is required for the label animation.

Email address

Password

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

2Textarea

A floating label on a textarea.

Your message

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a message" id="fl-msg-221"></textarea>
  <label for="fl-msg-221">Your message</label>
</div>

3Taller textarea

Set a height instead of rows - rows is ignored inside form-floating.

Describe the issue

<div class="form-floating">
  <textarea class="form-control" placeholder="Describe the issue" id="fl-msg-tall-222" style="height: 9rem;"></textarea>
  <label for="fl-msg-tall-222">Describe the issue</label>
</div>

4Select

Floating labels work with selects too; the label always stays up.

Service

<div class="form-floating">
  <select class="form-select" id="fl-select-223">
    <option selected>Workflow automation</option>
    <option>API integrations</option>
    <option>Secure file sharing</option>
  </select>
  <label for="fl-select-223">Service</label>
</div>

5Disabled

Disabled floating fields keep the label readable.

Company

Notes

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="fl-disabled-224" placeholder="Company" value="Irisis Labs" disabled>
  <label for="fl-disabled-224">Company</label>
</div>
<div class="form-floating">
  <textarea class="form-control" id="fl-disabled-ta-225" placeholder="Notes" disabled>Managed by your administrator.</textarea>
  <label for="fl-disabled-ta-225">Notes</label>
</div>

6Read-only plain text

form-control-plaintext with a floating label displays a saved value.

Account email

<div class="form-floating">
  <input type="email" readonly class="form-control-plaintext" id="fl-plain-226" placeholder="Account email" value="aria.lindqvist@example.com">
  <label for="fl-plain-226">Account email</label>
</div>

7In an input group

A floating field inside an input group with a leading addon.

Username

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

8With validation

Feedback below a floating field inside an input group with has-validation.

Enter a complete email address.

<div class="input-group has-validation">
  <span class="input-group-text"><i class="bi bi-envelope" aria-hidden="true"></i></span> 
  <div class="form-floating is-invalid">
    <input type="email" class="form-control is-invalid" id="fl-invalid-228" placeholder="Email" value="aria@" required>
    <label for="fl-invalid-228">Email</label>
  </div>
  <div class="invalid-feedback">
    Enter a complete email address.
  </div>
</div>

9Grid layout

Floating fields in a responsive row with gutters.

First name

Last name

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-first-229" placeholder="First name" value="Aria">
      <label for="fl-first-229">First name</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-last-230" placeholder="Last name" value="Lindqvist">
      <label for="fl-last-230">Last name</label>
    </div>
  </div>
</div>

10Sign-in card

A compact sign-in form built with floating labels.

Sign in to Yaraly Works

Password

Keep me signed in

<div class="card mx-auto" style="max-width: 24rem;">
  <div class="card-body p-4">
    <div class="text-center mb-3 fs-2 text-primary">
      <i class="bi bi-shield-lock" aria-hidden="true"></i>
    </div>
    <h3 class="h5 text-center mb-3">Sign in to Yaraly Works</h3>
    <div class="form-floating mb-2">
      <input type="email" class="form-control" id="fl-in-email-231" placeholder="Email">
      <label for="fl-in-email-231">Email</label>
    </div>
    <div class="form-floating mb-3">
      <input type="password" class="form-control" id="fl-in-pass-232" placeholder="Password">
      <label for="fl-in-pass-232">Password</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" id="fl-in-remember-233">
      <label class="form-check-label" for="fl-in-remember-233">Keep me signed in</label>
    </div>
    <button class="btn btn-primary w-100" type="button">Sign in</button>
  </div>
</div>

11Shipping address

Address fields with floating labels in a 2 / 1 split.

Street and number

City

ZIP

<div class="row g-2">
  <div class="col-12">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-street-234" placeholder="Street" value="465 Lakeview Terrace">
      <label for="fl-street-234">Street and number</label>
    </div>
  </div>
  <div class="col-8">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-city-235" placeholder="City" value="Barcelona">
      <label for="fl-city-235">City</label>
    </div>
  </div>
  <div class="col-4">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-zip-236" placeholder="ZIP" value="68352">
      <label for="fl-zip-236">ZIP</label>
    </div>
  </div>
</div>

12Date field

Date inputs always show their label floated because the browser draws a format hint.

Start date

<div class="form-floating">
  <input type="date" class="form-control" id="fl-date-237" placeholder="Start date" value="2026-10-25">
  <label for="fl-date-237">Start date</label>
</div>

13Number with addon

An amount with a currency addon next to a floating label.

Monthly budget

USD

<div class="input-group">
  <div class="form-floating">
    <input type="number" class="form-control" id="fl-amount-238" placeholder="Amount" value="816">
    <label for="fl-amount-238">Monthly budget</label>
  </div>
  <span class="input-group-text">USD</span>
</div>

14Pre-filled values

With a value present the label starts in its floated position.

Display name

Job title

<div class="form-floating mb-2">
  <input type="text" class="form-control" id="fl-prefilled-239" placeholder="Display name" value="Aria Lindqvist">
  <label for="fl-prefilled-239">Display name</label>
</div>
<div class="form-floating">
  <input type="text" class="form-control" id="fl-prefilled-role-240" placeholder="Job title" value="Marketing Lead">
  <label for="fl-prefilled-role-240">Job title</label>
</div>

15Contact form

Name, email, topic and message - a full contact form with floating labels.

<form class="row g-2">
  <div class="col-sm-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-c-name-241" placeholder="Name">
      <label for="fl-c-name-241">Name</label>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-floating">
      <input type="email" class="form-control" id="fl-c-email-242" placeholder="Email">
      <label for="fl-c-email-242">Email</label>
    </div>
  </div>
  <div class="col-12">
    <div class="form-floating">
      <select class="form-select" id="fl-c-topic-243">
        <option>General question</option>
        <option>API integrations</option>
        <option>Partnership</option>
      </select>
      <label for="fl-c-topic-243">Topic</label>
    </div>
  </div>
  <div class="col-12">
    <div class="form-floating">
      <textarea class="form-control" id="fl-c-msg-244" placeholder="Message" style="height: 7rem;"></textarea>
      <label for="fl-c-msg-244">Message</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Send message</button>
  </div>
</form>

16Payment details

Card fields laid out with floating labels and a lock note.

Name on card

Card number

Expiry (MM / YY)

CVC

Payments are encrypted.

<div class="row g-2">
  <div class="col-12">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-cardname-245" placeholder="Name on card" autocomplete="cc-name">
      <label for="fl-cardname-245">Name on card</label>
    </div>
  </div>
  <div class="col-12">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-cardnum-246" placeholder="Card number" inputmode="numeric" autocomplete="cc-number">
      <label for="fl-cardnum-246">Card number</label>
    </div>
  </div>
  <div class="col-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-exp-247" placeholder="MM / YY" autocomplete="cc-exp">
      <label for="fl-exp-247">Expiry (MM / YY)</label>
    </div>
  </div>
  <div class="col-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="fl-cvc-248" placeholder="CVC" inputmode="numeric" autocomplete="cc-csc">
      <label for="fl-cvc-248">CVC</label>
    </div>
  </div>
  <div class="col-12 small text-body-secondary">
    <i class="bi bi-lock-fill" aria-hidden="true"></i> Payments are encrypted.
  </div>
</div>

17Search with button

A large floating search field joined to an icon button.

Search product

<div class="input-group">
  <div class="form-floating">
    <input type="search" class="form-control" id="fl-search-249" placeholder="Search">
    <label for="fl-search-249">Search product</label>
  </div>
  <button class="btn btn-primary px-4" type="button" aria-label="Search"><i class="bi bi-search" aria-hidden="true"></i></button>
</div>

18Dark mode

Floating labels inside a dark section.

Password

<div class="p-4 rounded-3 bg-dark" data-ui-theme="dark">
  <div class="form-floating mb-2">
    <input type="email" class="form-control" id="fl-dark-email-250" placeholder="Email">
    <label for="fl-dark-email-250">Email</label>
  </div>
  <div class="form-floating">
    <input type="password" class="form-control" id="fl-dark-pass-251" placeholder="Password">
    <label for="fl-dark-pass-251">Password</label>
  </div>
</div>

19With help text

Help text sits below the floating container, linked by aria-describedby.

Page address

Lowercase letters, numbers and dashes only.

<div class="form-floating">
  <input type="text" class="form-control" id="fl-slug-252" placeholder="Page address" value="release-project" aria-describedby="fl-slug-help-253">
  <label for="fl-slug-252">Page address</label>
</div>
<div id="fl-slug-help-253" class="form-text">
  Lowercase letters, numbers and dashes only.
</div>

20Feedback form

A rating select and comment textarea for quick feedback.

How was your secure file sharing?

Rating

What could we do better?

<div class="card">
  <div class="card-body">
    <h3 class="h6">How was your secure file sharing?</h3>
    <div class="form-floating mb-2">
      <select class="form-select" id="fl-rating-254">
        <option>5 - Excellent</option>
        <option>4 - Good</option>
        <option>3 - Okay</option>
        <option>2 - Poor</option>
        <option>1 - Bad</option>
      </select>
      <label for="fl-rating-254">Rating</label>
    </div>
    <div class="form-floating mb-3">
      <textarea class="form-control" id="fl-feedback-255" placeholder="Comments" style="height: 6rem;"></textarea>
      <label for="fl-feedback-255">What could we do better?</label>
    </div>
    <button type="button" class="btn btn-primary btn-sm">Submit feedback</button>
  </div>
</div>