Skip to main content
Drupal is a registered trademark of Dries Buytaert
Release: Configuration Language Lock 1.0.2 — Minor update available for module config_language_lock (1.0.2). Release: Canvas Override 1.0.1 — Minor update available for module canvas_override (1.0.1). Release: Media Remote Image 8.x-1.2 — Minor update available for module media_entity_remote_image (8.x-1.2). Release: IDNA Convert Service (punycode) 2.0.4 — Minor update available for module idna (2.0.4). Release: Bootstrap Cloud 7.1.3 — Minor update available for theme bootstrap_cloud (7.1.3). Release: Token Browser 1.0.2 — Minor update available for module token_browser (1.0.2). Release: Varbase Project 11.0.8 — Minor update available for module varbase_project (11.0.8). Release: Media Remote Image 2.0.0-beta1 — First beta version released for module media_entity_remote_image (2.0.0-beta1). Usage Milestone: Term CSV Export Import — Module term_csv_export_import crossed 1,000 active installs. Security Coverage: Module Scout — Module module_scout now has official Drupal security advisory coverage.

Float Labels

106 sites No security coverage Drupal 10–11
View on drupal.org

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.

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

Tracked releases
1
Tracked since
Jun 2026
Latest release
3 months ago
Releases (12 mo)
1 ▲ from 0
Maintenance
Active

Releases

Version Type Core Release date
2.0.0 Stable 10–11 Jun 10, 2026