Form Control
Group checkboxes and radio elements together.
Make sure to wrap multiple checkbox fields with a <fieldset>.
.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-control--inline
Inline each form item and label.
.form-control--promoted
Additional padding and a background color added.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<fieldset class="form-item form-control {{modifier_class}}">
{% if modifier_class == 'is-required' -%}
<legend class="form-item__label form-item__legend">{{ icons.get('asterisk', 'icon form-item__required') }} Optional Details</legend>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('inHonor-' ~ modifier_class ) }}">
<input class="form-control__el" type="checkbox" name="optionalDetails" value="inHonor" id="{{ id|default('inHonor-' ~ modifier_class ) }}" required>
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc">
Donate in honor of someone and send a personalized card
</div>
</label>
</div>
{% else %}
<legend class="form-item__label form-item__legend">Optional Details</legend>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('inHonor-' ~ modifier_class ) }}">
<input class="form-control__el" type="checkbox" name="optionalDetails" value="inHonor" id="{{ id|default('inHonor-' ~ modifier_class ) }}" {{ modifier_class == 'is-disabled' ? 'disabled' }}>
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc">Donate in honor of someone and send a personalized card
<div class="form-control__details">Minimum donation: $10</div>
</div>
</label>
</div>
{% endif -%}
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('designate-' ~ modifier_class ) }}">
<input class="form-control__el" type="checkbox" name="optionalDetails" value="designate" id="{{ id|default('designate-' ~ modifier_class ) }}" {{ modifier_class == 'is-disabled' ? 'disabled' }}>
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc">
Designate your donation
<div class="form-control__details">Your gift will go where it is needed most, unless you specify a particular location or cause for it to be used.</div>
</div>
</label>
</div>
</fieldset>
<fieldset class="form-item form-control {{modifier_class}}">
{% if modifier_class == 'is-required' -%}
<legend class="form-item__label form-item__legend">{{ icons.get('asterisk', 'icon form-item__required') }} Choose Your Donation</legend>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('monthly-' ~ modifier_class ) }}">
<input class="form-control__el" type="radio" name="donateFrequency" value="monthly" id="{{ id|default('monthly-' ~ modifier_class ) }}" required>
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Donate monthly
</div>
</label>
</div>
{% else %}
<legend class="form-item__label form-item__legend">Choose Your Donation</legend>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('monthly-' ~ modifier_class ) }}">
<input class="form-control__el" type="radio" name="donateFrequency" value="monthly" id="{{ id|default('monthly-' ~ modifier_class ) }}" {{ modifier_class == 'is-disabled' ? 'disabled' }}>
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Donate monthly
</div>
</label>
</div>
{% endif -%}
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('once-' ~ modifier_class ) }}">
<input class="form-control__el" type="radio" name="donateFrequency" value="once" id="{{ id|default('once-' ~ modifier_class ) }}" {{ modifier_class == 'is-disabled' ? 'disabled' }}>
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Donate one time
</div>
</label>
</div>
</fieldset>
{% if modifier_class == '[modifier class]' and id is empty -%}
<fieldset class="form-item form-control">
<legend class="form-item__label form-item__legend">Different description formatting</legend>
<div class="form-control__item">
<label class="form-control__label" for="subName">
<input class="form-control__el" type="checkbox" name="subName" value="monthly" id="subName">
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc">
<div class="form-control__title">Habitat Extra!</div>
<div class="form-control__subtitle">Sent monthly<span class="form-control__vertline"></span><a href="#">Sample</a></div>
<p class="form-control__info">Stay informed of the latest Habitat for Humanity news, special events and volunteer opportunities.</p>
</div>
</label>
</div>
</fieldset>
{% endif -%}