Float Label Pattern Implemented In JavaScript – Floatl

Category: Form , Javascript , Recommended | September 22, 2018
Author: richardvenneman
Views Total: 601 views
Official Page: Go to website
Last Update: September 22, 2018
License: MIT


Float Label Pattern Implemented In JavaScript – Floatl


A simple, dependency-free JavaScript plugin that lets you implement the familiar Float Label Pattern in form fields (input and textarea) to improve user experience.


# Yarn
$ yarn add floatl

$ npm install floatl --save

How to use it:

Include the Floatl’s JavaScript and stylesheet on the webpage.

<link href="lib/css/floatl.css" rel="stylesheet">
<script src="lib/js/floatl.js"></script>

Add the following CSS classes to your existing form fields:

<div class="floatl js-floatl">
  <label class="floatl__label">Username</label>
  <input class="floatl__input" placeholder="Username" type="text">

<div class="floatl js-floatl">
  <label class="floatl__label">Password</label>
  <input class="floatl__input" placeholder="Password" type="password">

Initialize the Floatl and we’re done.

new Floatl(document.querySelectorAll('.js-floatl')[0])
new Floatl(document.querySelectorAll('.js-floatl')[1])


v0.2.1 (09/22/2018)

  • Bugfix

You Might Be Interested In:

Leave a Reply