What Is Floating Label?
In general, it floats the label (or placehold text) up above the input after the user focuses on your form field or enters a value. This can be helpful in createing a nice, clean and readable HTML form on your web project.
The Best Floating Label Solution
Table of contents:
Best jQuery Sticky Sidebar Plugins
A tiny jQuery plugin that adds cool CSS3 powered user interaction effects to your form fields, following the Google Material Design specification.
Placeholder Label is a jQuery input placeholder enhancement plugin that displays a floating top aligned label containing placeholder text when you're typing.
A simple, lightweight jQuery plugin for creating Material Design style inputs that transform the Bootstrap 4 form label into floating labels when the text fields are focused or clicked.
JVFloat.js is a simple yet user-friendly jQuery plugin for creating a Floating Label Text effect using HTML5 and CSS3, which is inspired by Matt D. Smith's Mobile Form Interaction.
floating-labels is a jQuery plugin used to create Material Design inspired text fields with animated floating labels for Bootstrap 4.
Best Vanilla JS Floating Label Libraries
Pure CSS Floating Label Solutions
Yet another pure CSS implementation of the ‘Float Label pattern that floats the label up above the form field when the user starts entering a value.
A pure CSS solution to create an animated placeholder and make it behave like a floating label above the input field when focused. Inspired by Gmail’s login input.
A CSS extension that lets you create Bootstrap 4 form controls with floating labels via the :placeholder-shown pseudo-element.