Form Ask String
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.jsdist/js/form-ask-string.bundle.js
{% import '@h4h_theme/icons/icons.twig' as icons %}
<fieldset class="form-ask-string form-item {{modifier_class}}">
<legend class="form-item__label form-item__legend">{{ icons.get('asterisk', 'icon form-item__required') }} Amount:</legend>
<label class="form-ask-string__btn" for="donate10">
<input class="form-ask-string__input form-ask-string__hidden" name="askString" type="radio" id="donate10" value="10" required>
<span class="form-item__text form-ask-string__faux">$10</span>
</label>
<label class="form-ask-string__btn" for="donate15">
<input class="form-ask-string__input form-ask-string__hidden" name="askString" type="radio" id="donate15" value="15">
<span class="form-item__text form-ask-string__faux">$15</span>
</label>
<label class="form-ask-string__btn" for="donate25">
<input class="form-ask-string__input form-ask-string__hidden" name="askString" type="radio" id="donate25" value="25">
<span class="form-item__text form-ask-string__faux">$25</span>
</label>
<label class="form-ask-string__btn" for="donate50">
<input class="form-ask-string__input form-ask-string__hidden" name="askString" type="radio" id="donate50" value="50">
<span class="form-item__text form-ask-string__faux">$50</span>
</label>
<label class="form-ask-string__btn" for="donate100">
<input class="form-ask-string__input form-ask-string__hidden" name="askString" type="radio" id="donate100" value="100">
<span class="form-item__text form-ask-string__faux">$100</span>
</label>
<div class="form-ask-string__other js-ask-wrapper">
<label for="donateother"><span class="form-ask-string__hidden">Other</span></label>
<input class="js-ask-target form-ask-string__hidden form-ask-string__input" name="askString" type="radio" id="donateother" value="other">
<label class="visually-hidden" for="donateOtherCustom">Other Amount</label>
<input class="js-ask-source form-item__text form-ask-string__other-input" type="text" id="donateOtherCustom" value="" placeholder="Other Amount">
</div>
</fieldset>