Float Label Pattern

In 2013 Matt D Smith shared an innovative form interaction pattern popularly known as “Float Label Pattern”; it floats the placeholder up above the input and make it as label after the user focuses on the form field or enters a value.

“Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won’t forget what an individual field represents.” — Matt D Smith

[GIF] Float Label Form Interaction

Later on June 25, 2014 Google incorporated this idea into Material design specification as Multi-line text field.

Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.

I have created my own implementation demo using CSS3 and vanilla JS for “Evergreen Browsers”:

See the Pen ZYVJdP by Mohd Ovais (@ovais) on CodePen.

The same code can work with older IE by using Shims Placeholders.js by James Allardice and classList.js by Eli Grey or using jQuery to manipulate classes, however that is not my intention as of now.

<form class="form">
    <div class="placeholder">
        <label>Username</label>
        <input type="text" placeholder="Username">
    </div>
    <div class="placeholder">
        <label>Password</label>
        <input type="text" placeholder="Password">
    </div>
    <div>
        <button type="submit">Login</button>
    </div>
</form>
.form {
    background-color: #F9F9F9;
    border: 1px solid #CCD1D7;
    padding: 1em;
 }
 
.form > div {
    padding: 0.5em;
}
 
.form .placeholder {
    position: relative;
    transition: padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
}
 
.placeholder.open {
    padding-top: 1.2em;
}
 
.form .placeholder label {
    color: #757575;
    cursor: text;
    font-family: sans-serif;
    font-size: 0.9em;
    left: 1em;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 1em;
    transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s;
 }
 
.form .placeholder.open label {
    color: #000;
    opacity: 1;
    position: absolute;
    top: 0;
 }
 
.form input {
    border-radius: 2.5px 0 0 2.5px;
    border: 1px solid #D7DCE0;
    box-shadow: inset 0 0 5px #D7DCE0;
    height: 38px;
    padding: 0 8px;
    width: 100%;
 }
 
.form button {
    background-color: #66BDFF;
    border-radius: 0 2.5px 2.5px 0;
    border: 1px solid #3294D5;
    color: #fff;
    cursor: pointer;
    font-size: 13px !important;
    height: 38px;
    padding: 0 9px;
    width: 100%;
 }
.form button:hover,
.form button:focus {
    background-color: #0D9EFF;
    box-shadow: inset 0 0 5px #D7DCE0;
}
.form button:active {
    box-shadow: inset 0 0 1px #000;
}

/* Hide the placeholder text on focus
   make font color white
*/
:focus::-webkit-input-placeholder {
    color: #fff;
}
:focus:-moz-placeholder {
    color: #fff; /* Firefox 18- */
}
:focus::-moz-placeholder {
    color: #fff; /* Firefox 19+ */
}
:focus:-ms-input-placeholder {
    color: #fff;
}

(function () {
"use strict";
var inputs = document.querySelectorAll('.placeholder input');
function onFocus(e) {
e.target.parentNode.classList.add('open');
}
function onBlur(e) {
if (e.target.value == '') {
e.target.parentNode.classList.remove('open');
}
}
for (var i = 0, l = inputs.length; i < l; i++) { inputs[i].addEventListener('focus', onFocus); inputs[i].addEventListener('blur', onBlur) } })(); [/highlight]

  1. divya

    Interesting! Is this a mobile-only pattern?

    1. Ovais

      Divya, it was started with mobile however now covers all form factors. You may also refer https://material.angularjs.org/#/demo/material.components.input

Leave a Reply

Your email address will not be published. Required fields are marked *