BS5 Floating Labels

Basic Floating Labels

Basic floating labels involve wrapping inputs and labels in a `.form-floating` container, where labels animate above the field when focused or filled. The label must appear after the input in the HTML, with matching `id` and `for` attributes for accessibility. A `placeholder` attribute is required for proper functionality, even if it's a space. This design pattern saves vertical space, improves form aesthetics, and provides clear context, making it ideal for modern login forms, registration pages, and data entry interfaces seeking a sleek, efficient user experience.

🔸 Text Input

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingInput" placeholder="name">
    <label for="floatingInput">Full Name</label>
</div>

<div class="form-floating">
    <input type="email" class="form-control" id="floatingEmail" placeholder="email">
    <label for="floatingEmail">Email Address</label>
</div>

🔹 Floating Labels with Textarea

Floating labels work seamlessly with textareas, providing clear, animated labels for multi-line text inputs like comments, descriptions, or messages. Setting an initial height with the `rows` attribute ensures proper textarea sizing while the label floats above when content is entered. This maintains visual consistency with single-line inputs and enhances form usability by keeping labels visible without occupying extra space. It is perfect for contact forms, feedback sections, or any interface requiring extended user input with elegant, space-saving labeling.

<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

🔹 Floating Labels with Select

Select dropdowns support floating labels without requiring a placeholder, as the label floats automatically when an option is chosen from the menu. This creates a unified look across different form controls, improving overall form consistency and professionalism. Floating labels with selects enhance user experience by clearly indicating the selected value while saving layout space. This approach is ideal for forms with multiple dropdowns, such as country selection, category picks, or preference settings, contributing to a polished, intuitive interface.

<div class="form-floating">
    <select class="form-select" id="floatingSelect">
        <option selected>Choose...</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>

🔹 Floating Labels in Grid

Combining floating labels with Bootstrap's grid system enables responsive, multi-column form layouts that adapt beautifully across screen sizes. Using column classes like `col-md-6` arranges floating label inputs side-by-side, optimizing horizontal space on larger screens while stacking vertically on mobile. This creates professional, organized forms for complex data entry, such as address forms, booking systems, or application processes. The integration ensures consistent spacing, alignment, and visual appeal, enhancing both usability and aesthetic presentation.

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

🔹 Disabled Floating Labels

Disabled floating labels display read-only fields with visible labels but prevent user interaction, useful for showing pre-filled or system-generated information. Adding the `disabled` attribute grays out the input while keeping the label in place, maintaining form structure without allowing edits. This is ideal for displaying account details, transaction IDs, or calculated values that users should see but not modify. It ensures data integrity and provides clear visual cues about field availability, improving form transparency and user trust.

<div class="form-floating">
    <input type="text" class="form-control" id="floatingDisabled" placeholder="Disabled" value="Disabled input" disabled>
    <label for="floatingDisabled">Disabled Field</label>
</div>

🔹 Complete Floating Form Example

A complete floating form example demonstrates how to integrate floating labels across various input types for a cohesive, modern data entry experience. This includes text inputs, textareas, selects, and validation states, all wrapped in a structured layout with consistent spacing and responsive behavior. Such forms save space, reduce clutter, and enhance user focus through smooth label animations. They are perfect for sign-up flows, survey tools, or any application requiring efficient, aesthetically pleasing form interactions that work flawlessly on all devices.

<form>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="email" placeholder="email">
        <label for="email">Email address</label>
    </div>
    <div class="form-floating mb-3">
        <input type="password" class="form-control" id="password" placeholder="Password">
        <label for="password">Password</label>
    </div>
    <div class="form-floating mb-3">
        <select class="form-select" id="country">
            <option selected>Choose...</option>
            <option value="1">USA</option>
            <option value="2">UK</option>
            <option value="3">Canada</option>
        </select>
        <label for="country">Country</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>