Habitat Style Guide

On focus the label moves above the form field so the user maintains the field context.

Usage: add the .form-float-label to a form item. Note that the label must follow the form element.

Requires:

• dist/js/foreach-nodelist/vendors/foreach-nodelist.js
• dist/js/form-float-label.bundle.js

To make a form item required, add the required attribute to the element and the form-item__required span to the label same as the normal form-item. In addition make sure the form-item wrapper contains the is-required class so the labels are formatted correctly.

Drupal Usage: Within the form build add a '#element_class', change the title (label) display to after and attach the float label library.

Example:

$form['formcta_state'] = [
 '#type' => 'select',
 ...
 '#element_class' => 'form-float-label',
 '#title_display' => 'after',
 '#attached' => [
   'library' => 'h4h_theme/float-label',
 ],
];