field.html.twig

{% if not field.validate.ignore %}

{% if not blueprints or (blueprints.schema.type(field.type)['input@'] ?? true) is same as(true) %}
    {% set default = field.default %}
    {% set toggleable = field.toggleable ?? false %}
    {% if toggleable %}
        {% set originalValue = originalValue ?? value %}
        {% set toggleableChecked = originalValue is not null %}
    {% endif %}

    {% set has_value = value is not null %}
    {% if not has_value %}
        {% set value = default %}
    {% endif %}

    {% if (field.yaml or field.validate.type == 'yaml') and value is iterable %}
        {% set value = value|toYaml %}
    {% endif %}
{% else %}
    {% set toggleable = false %}
{% endif %}
{% set vertical = field.style == 'vertical' %}
{% set field_name = (scope ~ field.name)|fieldName %}
{% set show_label = field.label is not same as(false) and field.display_label is not same as(false) %}

{# DEPRECATED: Needed by old form fields; remove when backwards compatibility breaks are allowed #}
{% set isDisabledToggleable = toggleable and not toggleableChecked %}

{% block field %}
    <div class="form-field grid{% if vertical %} vertical{% endif %}{% if toggleable %} form-field-toggleable{% endif %} {{ field.outerclasses }} {{ field.field_classes }}">
        {% block contents %}
            {% if show_label %}
            <div class="form-label{% if not vertical %} block size-1-3{% endif %}">
                {% if toggleable %}
                    <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field_name }}">
                        <input type="checkbox"
                               id="toggleable_{{ field.name }}"
                               {% if toggleableChecked %}value="1"{% endif %}
                               name="toggleable_{{ field_name }}"
                               {% if toggleableChecked %}checked="checked"{% endif %}
                        >
                        <label for="toggleable_{{ field.name }}"></label>
                    </span>
                {% endif %}
               <label{{ (field.toggleable ? ' class="toggleable ' ~ field.labelclasses ~ '" for="toggleable_' ~ field.name ~ '"' : ' class="' ~ field.labelclasses ~ '"')|raw }}>
                {% block label %}
                    {% if field.help %}
                        {% if field.markdown %}
                            <span class="hint--bottom" data-hint="{{ field.help|t|markdown(false) }}">{{ field.label|t|markdown(false)|raw }}</span> <i class="hint-icon fa fa-question-circle" aria-hidden="true"></i></span>
                        {% else %}
                            <span class="hint--bottom" data-hint="{{ field.help|t }}">{{ field.label|t|raw }} <i class="hint-icon fa fa-question-circle" aria-hidden="true"></i></span>
                        {% endif %}
                    {% else %}
                        {% if field.markdown %}
                            {{ field.label|t|markdown(false)|raw }}
                        {% else %}
                            {{ field.label|t|raw }}
                        {% endif %}
                    {% endif %}
                    {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
                {% endblock %}
                </label>
                {% if field.sublabel %}
                <div class="form-sublabel {{ field.sublabelclasses }}">
                    {% if field.markdown %}
                        {{ field.sublabel|t|markdown(false)|raw }}
                    {% else %}
                        {{ field.sublabel|t|raw }}
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endif %}
            <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
                {% block global_attributes %}
                data-grav-field="{{ field.type }}"
                data-grav-disabled="{{ toggleableChecked }}"
                data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
                {% endblock %}
            >
                {% block group %}
                    {% block input %}
                        <div class="form-input-wrapper {{ field.size }} {{ field.wrapper_classes }}">
                            {% block prepend %}{% endblock prepend %}
                            {% set input_value = value is iterable ? value|join(',') : value|string %}
                            <input
                                {# required attribute structures #}
                                name="{{ field_name }}"
                                value="{{ input_value }}"
                                {% if field.key %}
                                    data-key-observe="{{ (scope ~ field_name)|fieldName }}"
                                {% endif %}
                                {# input attribute structures #}
                                {% block input_attributes %}
                                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                                    {% if field.id is defined %}id="{{ field.id }}" {% endif %}
                                    {% if field.style is defined %}style="{{ field.style }}" {% endif %}
                                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                                    {% if field.placeholder %}placeholder="{{ field.placeholder|t }}"{% endif %}
                                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
                                    {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete }}"{% endif %}
                                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                                    {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
                                    {% if field.validate.message %}title="{{ field.validate.message|t }}"
                                    {% elseif field.title is defined %}title="{{ field.title|t }}" {% endif %}
                                {% endblock %}
                            />
                            {% block append %}{% endblock append %}
                        </div>
                    {% endblock %}
                {% endblock %}
                {% if field.description %}
                    <div class="form-extra-wrapper {{ field.wrapper_classes }}">
                        <span class="form-description">
                            {% if field.markdown %}
                                {{ field.description|t|markdown(false)|raw }}
                            {% else %}
                                {{ field.description|t|raw }}
                            {% endif %}
                        </span>
                    </div>
                {% endif %}
            </div>
        {% endblock %}
    </div>
{% endblock %}

{% endif %}