Form Select
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.jsdist/js/form-float-label.bundle.js
.is-required
To make a form item required, add the required attribute to the element and the
form-item__required icon to the label.
.is-disabled
Disable the form element. Make sure you add the
disabled to the form element as well.
.form-select--white
White color variation for use on dark backgrounds.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="form-item form-float-label {{modifier_class}}">
{% if modifier_class == 'is-required' -%}
<select required id="form-item-country-{{ modifier_class }}" class="form-item__text form-select">
{% elseif modifier_class == 'is-disabled' -%}
<select required id="form-item-country-{{ modifier_class }}" class="form-item__text form-select" disabled>
{% else %}
<select id="form-item-country-{{ modifier_class }}" class="form-item__text form-select {{ modifier_class == 'form-select--white' ? modifier_class }}">
{% endif -%}
<option selected value="">Select One</option>
<optgroup label="Regions">
<option value="1">International Fund</option>
<option value="2">Europe, the Middle East and Africa</option>
<option value="3">Asia and the Pacific</option>
<option value="4">Latin America and the Caribbean</option>
</optgroup>
<optgroup label="Countries">
<option value="5">United States</option>
<option value="6">Argentina</option>
</optgroup>
</select>
{% if modifier_class == 'is-required' -%}
<label class="form-item__label" for="{{ id|default('form-item-country-' ~ modifier_class ) }}">{{ icons.get('asterisk', 'icon form-item__required') }} Select country or region</label>
{% else %}
<label class="form-item__label" for="{{ id|default('form-item-country-' ~ modifier_class ) }}"> Select country or region</label>
{% endif -%}
</div>