Bootstrap 5 Form Floating Labels

Floating labels are a sleek and modern way to enhance form usability and user experience. With Bootstrap 5, implementing floating labels is straightforward, and they work seamlessly across devices. Floating labels remain visible even when the input field is active or filled, providing context to users at all times.

In this guide, you’ll learn how to create and customize Bootstrap 5 floating labels for forms, along with best practices for accessibility and design.

What Are Floating Labels?

Floating labels replace traditional placeholders in form fields. Instead of disappearing when the user interacts with an input field, the placeholder text moves above the field, acting as a label. This approach reduces confusion and provides better usability.

Basic Floating Label Example

To create a floating label, use the form-floating class provided by Bootstrap 5. Wrap the input field and label within a div element with this class.

Example:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

Explanation:

  1. form-floating: Enables the floating label functionality.
  2. form-control: Applies Bootstrap’s default styling to the input.
  3. placeholder: Required for floating labels to work, but it remains hidden after the label floats.
  4. label: Acts as the floating label, connected to the input field via the for attribute.

Floating Labels with Password Fields

Floating labels work seamlessly with password fields, improving security-related input forms.

Example:

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Floating Labels with Textareas

To use floating labels with textareas, add the form-floating class and the form-control class to the <textarea> element. Bootstrap 5 ensures consistent styling.

Example:

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

Adjusting Height:

If the textarea appears too small, use the style attribute or Bootstrap’s utility classes to adjust its height:

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px;"></textarea>

Floating Labels with Select Dropdowns

Bootstrap 5 supports floating labels for <select> elements as well. Add the form-select class to style the dropdown properly.

Example:

<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label for="floatingSelect">Select an option</label>
</div>

Inline Floating Labels

By default, floating labels stack vertically. To create inline forms with floating labels, use Bootstrap’s grid system and utility classes.

Example:

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingFirstName" placeholder="First Name">
      <label for="floatingFirstName">First Name</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingLastName" placeholder="Last Name">
      <label for="floatingLastName">Last Name</label>
    </div>
  </div>
</div>

Customizing Floating Labels

Changing Label Position

You can modify the label’s position using custom CSS to suit your design preferences.

Example:

<style>
  .form-floating .form-control:focus ~ label {
    color: #007bff;
  }
</style>

Adding Validation to Floating Labels

You can use Bootstrap 5’s validation classes to ensure input fields meet the required conditions.

Example:

<form class="needs-validation" novalidate>
  <div class="form-floating mb-3">
    <input type="email" class="form-control is-invalid" id="validationFloatingInput" placeholder="[email protected]" required>
    <label for="validationFloatingInput">Email address</label>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Dark Mode with Floating Labels

Bootstrap 5 allows floating labels to adapt to dark mode effortlessly. Use the bg-dark and text-light classes to style your form for dark mode.

Example:

<div class="form-floating mb-3 bg-dark text-light">
  <input type="text" class="form-control bg-dark text-light" id="floatingDark" placeholder="Dark Mode Input">
  <label for="floatingDark">Dark Mode Input</label>
</div>

Best Practices for Floating Labels

  1. Accessibility: Ensure labels are descriptive and linked to the input field using the for attribute.
  2. Consistent Height: Use consistent input sizes across forms to maintain visual harmony.
  3. Validation Feedback: Provide clear feedback using Bootstrap’s validation classes.

FAQs About Bootstrap 5 Floating Labels

1. Do floating labels work without placeholders?

No, placeholders are required for the floating label to function correctly.

2. Can I use floating labels with input groups?

No, floating labels are not designed to be used with input groups as of Bootstrap 5.

3. How do floating labels behave on smaller screens?

Floating labels are fully responsive and adapt seamlessly to all screen sizes.

Conclusion

Floating labels in Bootstrap 5 are an elegant way to enhance form usability and aesthetics. Whether you’re building a simple login form or a complex data input form, floating labels provide a modern and user-friendly design. Start experimenting with floating labels today and take your forms to the next level!

Leave a Comment