Skip to content

Latest commit

 

History

History
289 lines (192 loc) · 7.26 KB

README.md

File metadata and controls

289 lines (192 loc) · 7.26 KB
Raw

float-labels.js

GitHub version License

A zero-dependency plugin that applies the float label pattern to a form.

The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.

For production, use the files from the dist/ folder.

Installation

Use one of the following methods to add Float Labels to your project:

  • Download ZIP
  • yarn add float-labels.js
  • npm install float-labels.js
  • bower install float-labels.js

Usage

Add a label element before your input, textarea or select elements, eg:

<label for="input-1">Enter a title</label>
<input type="text" id="input-1" placeholder="Input" value="" required/>

<label for="textarea-1">Enter some content</label>
<textarea id="textarea-1" placeholder="Textarea" rows="4" autocomplete="off" required></textarea>

<label for="select-1">Select an option</label>
<select id="select-1" class="required">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Load the dist/float-labels.css and dist/float-labels.min.js files somewhere on your page and then trigger the plugin as follows:

var floatlabels = new FloatLabels( 'form', {
    // options go here
});

To re-initialize Float Labels after it has already been initialized (e.g. form fields have changed with ajax):

floatlabels.rebuild();

To fully remove Float Labels, including all attached Event Listeners:

floatlabels.destroy();

Options

Here are the default options

{
    customEvent  : null,
    customLabel  : null,
    exclude      : '.no-label',
    inputRegex   : /email|number|password|search|tel|text|url/,
    prefix       : 'fl-',
    prioritize   : 'label',
    requiredClass: 'required',
    style        : 0,
    transform    : 'input, select, textarea',
}

customEvent:

Type: Function

This function is run immediately after an element has been transformed by float-labels.

customEvent: function( el ) {
    // do something
},

customLabel

Type: Function

This function lets you modify a label text; it must return a string.

customLabel: function( labelEl, el ) {
    return labelEl.text;
},

exclude

Type: String

A comma-separated string of DOM selector elements to exclude.

inputRegex

Type: Regex

Regex of INPUT types to transform.

prefix

Type: String

The prefix of all the Float Label CSS classes.

If you change the prefix, you will need to either write your own custom CSS, or change the prefix option in the SCSS to match.

prioritize

Type: String

Choose to prioritize either the label or placeholder text as the floating-label.

requiredClass

Type: String

The class name of required elements (if not using the required attribute).

style

Type: Number|String

Choose the style to use, the default value is either 0, 1, or 2. This is used to create the Float Labels style classname (i.e. .fl-style-1). If you have created your own CSS style (i.e. .fl-style-custom), enter it here (i.e. custom).

transform

Type: String

A comma-separated string of DOM elements to transform. Available options are: input, select, and textarea.

Build

Float Labels uses yarn to manage package dependencies and gulp to build from src/.

yarn
gulp

The compiled files will be saved in the dist/ folder.

Style Customization

Sass is used to build the stylesheet so you can @import the src/float-labels.scss file to compile it directly into your Sass project.

Following are the default sass values for Float Labels, they are contained in a map variable.

$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,
    parent                  : '',
    prefix                  : 'fl-',
    transition-easing       : ease-in-out,
    transition-speed        : 0.2s,
);

To override any values with your own, simply create a new $float-labels map variable and include only the values you wish to change.

Important: Make sure you define $float-labels before you import the src/float-labels.scss file:

$float-labels: (
    border-radius      : 0,
    border-width       : 2px,
    color-border-focus : #009688,
    color-text-focus   : #009688,
    font-weight        : 700,
);

@import "../../node_modules/float-labels.js/src/float-labels"

How to change CSS style priority

Sometimes existing CSS stylesheet rules will override the styling of Float Labels. To solve this problem, you can specify a "parent" option in the $float-labels map variable. This option value should be property such as an existing #id definition with a high priority/specificity.

In the following example, all Float Labels css rules will begin with form#my-form:

$float-labels: (
    parent: 'form#my-form',
);

The CSS rule .fl-form label.fl-label { ... } now becomes form#my-form.fl-form label.fl-label { ... }.

Compatibility

  • All modern browsers
  • IE 10+

Contributing

All changes should be committed to the files in src/.

Changelog

v3.0.3 - [2017-08-09]

  • Reset placeholder text on "destroy"

v3.0.2 - [2017-08-08]

  • Added "rebuild" and "destroy" public methods
  • Added ability to change the CSS class prefix
  • Removed jQuery plugin as it's unnecessary
  • Removed IE9 support

v2.1.0 - [2017-08-07]

  • Added "parent" option in SCSS $float-labels-defaults to change the CSS rules priority.

v2.0.2 - [2017-07-14]

  • Fix usage of forEach method on a NodeList

v2.0.1 - [2017-01-23]

  • Fix jQuery plugin

v2.0.0 - [2017-01-11]

  • added 2 new styles
  • added new options
  • re-written as a zero-dependency plugin

v1.0.9 - [2016-08-06]

  • publish to npm

v1.0.8 - [2016-01-31]

  • added "*-active" SCSS variables for borders and backgrounds
  • fixed textarea font-size potentially differing from inputs/selects
  • updated npm package dependancies

v1.0.7 - [2015-09-23]

  • add the placeholder="" attribute from the label text if it doesn't exist
  • add the data-tooltip="" attribute to the label if it exists
  • new option priority for placeholder/label
  • detect if field ID is not unique and handle label

v1.0.6 - [2015-09-23]

  • skip a form element if related label is not found
  • adjusted SCSS variables

v1.0.0 - [2015-09-03]

  • initial release

License

MIT