This module adds animated, floating labels to Drupal forms. These labels behave like placeholders until the field is focused or populated, at which point they animate to the top of the input. You can configure which forms should use this effect.
Applies configurable, JS-enhanced floating CSS labels to Drupal forms in a similar fashion as laid out here: http://jsfiddle.net/RyanWalters/z9ymd852/
There is a settings page where you can enter the form IDs you wish this to apply to, and that's generally all that's required (beyond styling customizations for your use case).
As seen in the screenshot:
- The first two items have values typed into them. Their labels are permanent affixed to the top of the input as a result.
- The third item has no value typed into it and is not focused. It works just like a placeholder.
- The fourth item is the currently-focused item, ready for typing.
CSS3 animations are used to transition the label.
Select fields are now also supported. Rather than having a floating label, their default value is replaced with their label, and then the label hidden.
Ask your assistant about Float Labels
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.
Activity
Release Timeline
Releases
| Version | Type | Core | PHP | Release date | |
|---|---|---|---|---|---|
| 2.0.0 | Stable | 10–11 | Jun 10, 2026 | ||
| 2.0.0-beta1 | Pre-release | 9–10 | Aug 18, 2023 | ||
| 2.x-dev | Dev | 10–11 | Aug 18, 2023 |