Form item
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-focusmust be applied to the form item. - The following JS must be included.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/form-item.bundle.js
Field is required.
Form item description.
.form-item--wide
Fill the container with the form element.
Field is required.
Form item description.
.form-item--inline
Form element is inline.
Field is required.
Form item description.
.form-item--no-margin
Bottom margin provided by default is removed.
Field is required.
Form item description.
.is-required
To make a form item required, add the required attribute to the element and the
form-item__required icon to the label.
Field is required.
Form item description.
.is-focused
Highlight the form element when it's focused.
Field is required.
Form item description.
.is-error
Highlight the form elements that caused a form submission error.
Field is required.
Form item description.
.is-disabled
Disable the form element. Make sure you add the
disabled to the form element as well.
Field is required.
Form item description.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="form-item {{modifier_class}}">
{% if modifier_class == 'is-required' -%}
<label class="form-item__label" for="form-item-input-required">{{ icons.get('asterisk', 'icon form-item__required') }} Label</label>
<input class="form-item__text js-form-item-focus" required type="text" id="form-item-input-required" value="Text value">
{% elseif modifier_class == 'is-disabled' -%}
<label class="form-item__label" for="form-item-input-disabled">Label</label>
<input class="form-item__text" required type="text" id="form-item-input-disabled" value="Text value" disabled>
{% else %}
<label class="form-item__label" for="form-item-input">Label</label>
<input class="form-item__text js-form-item-focus" type="text" id="form-item-input" value="Text value">
{% endif -%}
<div class="form-item__error">Field is required.</div>
<div class="form-item__description">
Form item description.
</div>
</div>