Form Float Label
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',
],
];
.is-required
Denotes required form items.
.is-disabled
Disable the form element. Make sure you add the
disabled
to the form element as well.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="form-item form-float-label {{ modifier_class }}">
{% if modifier_class == 'is-required' -%}
<input class="form-item__text" required type="text" id="{{ id|default('form-item-name') }}" value="">
<label class="form-item__label" for="{{ id|default('form-item-name') }}">{{ icons.get('asterisk', 'icon form-item__required') }} First Name</label>
{% elseif modifier_class == 'is-disabled' -%}
<input class="form-item__text" disabled type="text" id="{{ id|default('form-item-name-disabled') }}" value="">
<label class="form-item__label" for="{{ id|default('form-item-name-disabled') }}">Address</label>
{% else %}
<input class="form-item__text" type="text" id="{{ id|default('form-item-phone') }}" value="">
<label class="form-item__label" for="{{ id|default('form-item-phone') }}">Phone</label>
{% endif -%}
</div>