Float Label Pattern Implemented In JavaScript – Floatl

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

Preview:

Float Label Pattern Implemented In JavaScript – Floatl

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

You Might Be Interested In:


Leave a Reply