wc-bootstrap/templates/components/form-field.html.twig

{#
 # Form Field Component (Bootstrap 5)
 #
 # Reusable form field wrapper with label, input, and validation.
 # Renders different input types based on the field configuration.
 #
 # Expected context:
 #   field_key  - Field name/key
 #   field      - Field configuration array with:
 #     .type        - Input type (text, email, password, tel, select, textarea, checkbox, radio)
 #     .label       - Field label
 #     .required    - Whether field is required (boolean)
 #     .placeholder - Placeholder text (optional)
 #     .options     - Array of options for select/radio (optional)
 #     .value       - Current value (optional)
 #     .description - Help text (optional)
 #     .class       - Additional CSS classes (optional)
 #
 # Usage:
 #   {% include 'components/form-field.html.twig' with {
 #       field_key: 'billing_email',
 #       field: { type: 'email', label: 'Email', required: true }
 #   } %}
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set field_type = field.type|default('text') %}
{% set field_id = field_key|replace({'_': '-', '[': '-', ']': ''}) %}
{% set is_required = field.required|default(false) %}

{% if field_type == 'checkbox' %}
    <div class="form-check mb-3">
        <input type="checkbox"
               class="form-check-input {{ field.class|default('') }}"
               name="{{ field_key|esc_attr }}"
               id="{{ field_id|esc_attr }}"
               value="1"
               {% if field.value|default(false) %}checked{% endif %}
               {% if is_required %}required aria-required="true"{% endif %} />
        <label class="form-check-label" for="{{ field_id|esc_attr }}">
            {{ field.label }}
            {% if is_required %}<span class="text-danger" aria-hidden="true">*</span>{% endif %}
        </label>
    </div>
{% elseif field_type == 'textarea' %}
    <div class="mb-3">
        <label for="{{ field_id|esc_attr }}" class="form-label">
            {{ field.label }}
            {% if is_required %}
                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
                <span class="visually-hidden">{{ __('Required') }}</span>
            {% endif %}
        </label>
        <textarea class="form-control {{ field.class|default('') }}"
                  name="{{ field_key|esc_attr }}"
                  id="{{ field_id|esc_attr }}"
                  rows="{{ field.rows|default(3) }}"
                  {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
                  {% if is_required %}required aria-required="true"{% endif %}>{{ field.value|default('')|esc_html }}</textarea>
        {% if field.description is defined and field.description %}
            <div class="form-text">{{ field.description }}</div>
        {% endif %}
    </div>
{% elseif field_type == 'select' %}
    <div class="mb-3">
        <label for="{{ field_id|esc_attr }}" class="form-label">
            {{ field.label }}
            {% if is_required %}
                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
                <span class="visually-hidden">{{ __('Required') }}</span>
            {% endif %}
        </label>
        <select class="form-select {{ field.class|default('') }}"
                name="{{ field_key|esc_attr }}"
                id="{{ field_id|esc_attr }}"
                {% if is_required %}required aria-required="true"{% endif %}>
            {% if field.placeholder is defined %}
                <option value="">{{ field.placeholder|esc_html }}</option>
            {% endif %}
            {% for option_value, option_label in field.options|default({}) %}
                <option value="{{ option_value|esc_attr }}"
                        {% if field.value|default('') == option_value %}selected{% endif %}>
                    {{ option_label|esc_html }}
                </option>
            {% endfor %}
        </select>
        {% if field.description is defined and field.description %}
            <div class="form-text">{{ field.description }}</div>
        {% endif %}
    </div>
{% else %}
    <div class="mb-3">
        <label for="{{ field_id|esc_attr }}" class="form-label">
            {{ field.label }}
            {% if is_required %}
                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
                <span class="visually-hidden">{{ __('Required') }}</span>
            {% endif %}
        </label>
        <input type="{{ field_type|esc_attr }}"
               class="form-control {{ field.class|default('') }}"
               name="{{ field_key|esc_attr }}"
               id="{{ field_id|esc_attr }}"
               value="{{ field.value|default('')|esc_attr }}"
               {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
               {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete|esc_attr }}"{% endif %}
               {% if is_required %}required aria-required="true"{% endif %} />
        {% if field.description is defined and field.description %}
            <div class="form-text">{{ field.description }}</div>
        {% endif %}
    </div>
{% endif %}