Pure JavaScript Float Label Pattern For Form Fields – float-labels.js

Preview:

Description:

Just another JavaScript plugin for creating the float label pattern on form fields that support input field, textarea and even select elements. Fully customizable via JavaScript and SCSS.

Install it via package managers:

# Yarn
yarn add float-labels.js
# NPM
$ npm install float-labels.js
# Bower
$ bower install float-labels.js

How to use it:

Add the required JS and CSS files to the webpage.

<link href="dist/float-labels.css" rel="stylesheet">
<script src="dist/float-labels.min.js"></script>

Initialize the library on the target form element as this:

new FloatLabels( '.my-form');

Default options to customize the float label pattern.

new FloatLabels( '.my-form',{
    customEvent  : null,
    customLabel  : null,
    exclude      : '.no-label',
    inputRegex   : /email|number|password|search|tel|text|url/,
    prioritize   : 'label', // label|placeholder
    requiredClass: 'required',
    style        : 0, // 0|1|2
    transform    : 'input,select,textarea'
});

Override the default styles in the SCSS.

$float-labels-defaults: (
  base-height             : 24px,
  base-padding            : 6px,
  border-radius           : 3px,
  border-width            : 1px,
  margin-bottom           : 24px,
  color-background        : #fff,
  color-background-active : #fff,
  color-background-focus  : #fff,
  color-border            : #dfdfdf,
  color-border-active     : #dfdfdf,
  color-border-focus      : #1976D2,
  color-placeholder       : #bbb,
  color-required          : #D32F2F,
  color-text              : #444,
  color-text-focus        : #1976D2,
  line-height             : 1.5,
  font-size               : 16px,
  font-size-small         : 12px,
  font-weight             : 400,
  transition-easing       : ease-in-out,
  transition-speed        : 0.2s,
);

Changelog:

v3.3.5 (09/23/2018)

• Fixed: Uncaught TypeError: Cannot read property ‘defaultSelected’ of undefined