Float Label Pattern Implemented In JavaScript – Floatl

Preview:

Description:

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.

Installation:

# Yarn
$ yarn add floatl
# NPM
$ 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>
<div class="floatl js-floatl">
  <label class="floatl__label">Password</label>
  <input class="floatl__input" placeholder="Password" type="password">
</div>

Initialize the Floatl and we’re done.

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

Changelog:

v0.2.1 (09/22/2018)

• Bugfix