Wrapper for a form element (or group of form elements) and its label.

Notes: If you'd like for the label to be have focus styles:

• A class of .js-form-item-focus must be applied to the form item.
• The following JS must be included.

Requires:

• dist/js/foreach-nodelist/vendors/foreach-nodelist.js
• dist/js/form-item.bundle.js

This component is basically custom radio elements with a small bit of JavaScript to make sure the 'custom amount' text input works. Note that the ask string is always required.

Requires:

• dist/js/foreach-nodelist/vendors/foreach-nodelist.js
• dist/js/form-ask-string.bundle.js

Group checkboxes and radio elements together. Make sure to wrap multiple checkbox fields with a <fieldset>.

This component is used within the donation page to show which credit cards the form accepts.

This is the Form Expandable component. It allows a checkbox or radio element to expand a child container. This is a pure CSS solution with no JS dependency.

Usage:

• Add .form-expandable__src to the radio or checkbox.
• On the same level add .form-expandable__container to the container element of the element you'd like to toggle.
• Finally add .form-expandable__target to the element you would like to toggle.
• The .form-expandable__content class adds additional padding for nested elements.

Example:

<input class="form-expandable__src" type="radio">
  ...
<div class="form-expandable__container">
    ...
  <div class="form-expandable__target">
    <div class="form-expandable__content">
      Content that will be expanded.
    </div>
  </div>
</div>

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',
 ],
];

Allows form text inputs and buttons to sit on the same line.

Add form items to general layouts.

This is a custom select form element. This element reuses the form float label styles and JavaScript in order to provide the float label interaction.

Requires:

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