Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic customizes the Bootstrap Floating Labels through the SASS variables in src/sass/components/_variables.scss.

Basic

Basic examples of using floating labels:

Email address

Password

Input with value

<!--begin::Input group-->
<div class="form-floating mb-7">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"/>
    <label for="floatingInput">Email address</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating mb-7">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password"/>
    <label for="floatingPassword">Password</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating">
    <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com"/>
    <label for="floatingInputValue">Input with value</label>
</div>
<!--end::Input group-->

Validation States

Form validation states work as expected:

Valid input

Invalid input

<!--begin::Input group-->
<div class="form-floating mb-7">
    <input type="email" class="form-control is-valid" id="floatingInput2" placeholder="name@example.com" value="test@example.com"/>
    <label for="floatingInput">Valid input</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating">
    <input type="password" class="form-control is-invalid" id="floatingPassword2" placeholder="name@example.com" value="test@example.com"/>
    <label for="floatingPassword">Invalid input</label>
</div>
<!--end::Input group-->

Textareas

Textares with default and custom height options:

Comments

<!--begin::Input group-->
<div class="form-floating mb-7">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
    <label for="floatingTextarea2">Comments</label>
</div>
<!--end::Input group-->

Selects

Floating Labels are available on form select elements as well:

Works with selects

<!--begin::Input group-->
<div class="form-floating">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>
<!--end::Input group-->

Solid Style

Floating label inputs with solid background style:

Email address

Works with selects

Comments

<!--begin::Input group-->
<div class="form-floating mb-7">
    <input type="email" class="form-control form-control-solid" id="floatingInput1" placeholder="name@example.com"/>
    <label for="floatingInput1">Email address</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating mb-7">
    <select class="form-select form-select-solid" id="floatingSelect1" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect1">Works with selects</label>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="form-floating">
    <textarea class="form-control form-control-solid" placeholder="Leave a comment here" id="floatingTextarea1"></textarea>
    <label for="floatingTextarea1">Comments</label>
</div>
<!--end::Input group-->