Home How it Works Components Validation Spam Cloud Emails Pricing Docs API Docs FAQ Sign In Try It Free

Floating Labels Bronze Plan

Floating labels is an input area that shows a placeholder text in it. Once you click the input the placeholder text floats up as a label.


Adding Floating Labels
  • Simply wrap a field and label inside an element with class="kw-floating-label-wrapper”.
  • Add a placeholder attribute to the input element.
<div class="kw-floating-label-wrapper">
    <label for="name">Your Name</label>
    <input type="text" name="name" class="form-control" placeholder="name">
</div>
Styling Floating Labels

Here is the default css stylings that can be overridden.

.kw-floating-label-wrapper {
    position: relative;
    margin-bottom: 25px;
}

.kw-floating-label-wrapper .kw-floating-label {
    opacity: 0;
    visibility: hidden;
    display: block;
    position: absolute;
    top: 0px;
    left: 7px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #bbb;
    transition: all 0.2s ease-in-out;
    z-index: 1;
    padding: 3px;
    border-top-left-radius: 3px;
}

.kw-floating-label-wrapper .kw-floating-label.is-active {
    opacity: 1;
    visibility: visible;
    top: -9px;
    padding: 3px;
    background-color: transparent;
    left: 7px;
}

kw-floating-label-wrapper .kw-floating-label.is-active:before {
    top: 4px;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #fff;
    z-index: -1;
}

.kw-floating-label-wrapper .kw-floating-label.is-focused {
    color: #4D90FE;
}