Forms
#
Radio {% include 'elements/forms/radio' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">Visa (debit)</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">Visa (credit)</label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">{{values.1}}</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">{{values.2}}</label>
            </div>
        </div>
    </div>
</div>
{
    "values": {
        "1": "Visa (debit)",
        "2": "Visa (credit)"
    }
}
Disclaimer {% include 'elements/forms/disclaimer' %}
#
HTML
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.</em></p>
    </div>
</div>
Twig
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>{{ disclaimer }}</em></p>
    </div>
</div>
{
    "disclaimer": "We\u2019d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time \u2013 just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes."
}

We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.

Input Button {% include 'elements/forms/input-button' %}
#
HTML
<div class="field-set">
    <label class="field-set__title" for="text">Address</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="Find" class="secondary-button">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <label class="field-set__title" for="text">{{ label }}</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="{{button}}" class="secondary-button">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Address",
    "button": "Find"
}
Input {% include 'elements/forms/input' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Merged Fields Three {% include 'elements/forms/merged-fields~three' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 4,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        },
        "2": {
            "label": "Text Field"
        }
    }
}
Text Field
Checkbox {% include 'elements/forms/checkbox' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox1" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox1"><span class="field-set__label-text">This is a really long choice that could be used as a confirmation</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox2" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox2"><span class="field-set__label-text">Choice B</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox3" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox3"><span class="field-set__label-text">Choice C</span></label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            {% for value in values %}
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--checkbox default-style" id="checkbox{{loop.index}}" name="checkbox" type="checkbox" />
                    <label class="field-set__label field-set__label--checkbox" for="checkbox{{loop.index}}"><span class="field-set__label-text">{{value}}</span></label>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "This is a really long choice that could be used as a confirmation",
        "2": "Choice B",
        "3": "Choice C"
    }
}
Merged Fields {% include 'elements/forms/merged-fields' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 6,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        }
    }
}
Text Field
Input Error {% include 'elements/forms/input~error' %}
#
HTML
<div class="field-set field-set--error">
    <label class="field-set__title" for="text">Email Input</label>
    <span class="error-message">Please enter a valid email address</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--error">
                <span class="field-set__label">you@yourdomain.com</span> 
                <input class="field-set__input" type="email">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "email",
    "placeholder": "you@yourdomain.com",
    "label": "Email Input",
    "error": "Please enter a valid email address"
}
Please enter a valid email address
you@yourdomain.com
Payment Type {% include 'elements/forms/payment-type' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Paypal
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.1}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.2}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.3}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.4}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.5}}</label>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "payment": {
        "1": "Mastercard (debit)",
        "2": "Mastercard (credit)",
        "3": "Visa (debit)",
        "4": "Visa (credit)",
        "5": "Paypal"
    }
}
Input Email {% include 'elements/forms/input~email' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Tabbed Radio {% include 'elements/forms/tabbed-radio' %}
#
HTML
<div class="field-set field-set--tabbed-radio">
    <span class="field-set__title">Direct Debit instruction is</span>

    <div class="field-set__content">
        <div class="field-set__items">
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                    <label class="field-set__label field-set__label--radio" for="radioe1">New</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe2">Add to existing</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe3">Replace existing</label>
                </div>
            </div>
        </div>
    </div>
Twig
<div class="field-set field-set--tabbed-radio">
<span class="field-set__title">{{label}}</span>
<div class="field-set__content">
    <div class="field-set__items">
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioe1">{{values.1}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe2">{{values.2}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe3">{{values.3}}</label>
            </div>
        </div>
    </div>
</div>
{
    "label": "Direct Debit instruction is",
    "values": {
        "1": "New",
        "2": "Add to existing",
        "3": "Replace existing"
    }
}
Direct Debit instruction is
Input With Limiter {% include 'elements/forms/input-with-limiter' %}
#
HTML
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">Text Input</label>
            <input class="field-set__input field-set__input-limit" data-limit="50" type="textarea" />
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">{{label}}</label>
            <input class="field-set__input field-set__input-limit" data-limit="{{limit}}" type="{{type}}" />
        </div>
    </div>
</div>
{
    "type": "textarea",
    "placeholder": "",
    "label": "Text Input",
    "limit": 50
}
Select {% include 'elements/forms/select' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">Title</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span> 
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">Mr</option>
                            <option value="miss">Miss</option>
                            <option value="mrs">Mrs</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">{{label}}</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span>
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">{{values.1}}</option>
                            <option value="miss">{{values.2}}</option>
                            <option value="mrs">{{values.3}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "Mr",
        "2": "Miss",
        "3": "Mrs"
    }
}
Input Tooltip {% include 'elements/forms/input~tooltip' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="tooltip">
            <span class="tooltip__button">?</span> 
            <div class="tooltip__content" style="display: none;">Tooltip text</div>
        </div>
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input",
    "tooltip": "Tooltip text"
}
?
Input Date {% include 'elements/forms/input-date' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-date" value="15-8-2018" data-min-date="15.8.2018" data-max-date="15.10.2018" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-date" value="{{ default_date }}" data-min-date="15.8.2018" data-max-date="15.10.2018" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date",
    "default_date": "15-8-2018"
}
Select Date
Input Datetime {% include 'elements/forms/input-datetime' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-datetime" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-datetime" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date"
}
Select Date
Input Time {% include 'elements/forms/input-time' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Time</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Time</span> 
                <input class="field-set__input field-set__input-time" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-time" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Time",
    "label": "Time"
}
Select Time
Input Sortcode {% include 'elements/forms/input-sortcode' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Sort code</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Sort code"
}
Toggle {% include 'elements/forms/toggle' %}
#
HTML
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>
                            Tearfund action emails
                        </h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come. 
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>Tearfund action emails</h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come.
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{}