select.html.twig in Open Social 8.7

Theme override for a select element.

Available variables:

• attributes: HTML attributes for the select tag.
• input_group: Flag to display as an input group.
• options: The option element children.
• prefix: Markup to display before the input element.
• suffix: Markup to display after the input element.

See also

template_preprocess_select()

File

themes/socialbase/templates/form/select.html.twig

{#
/**
 * @file
 * Theme override for a select element.
 *
 * Available variables:
 * - attributes: HTML attributes for the select tag.
 * - input_group: Flag to display as an input group.
 * - options: The option element children.
 * - prefix: Markup to display before the input element.
 * - suffix: Markup to display after the input element.
 *
 * @see template_preprocess_select()
 */
#}
{% spaceless %}
  {% if input_group %}
  {{ attach_library('socialbase/form--input-groups') }}
    <div class="input-group">
  {% endif %}

  {% if prefix %}
    {{ prefix }}
  {% endif %}

  {% if multiselect %}
    {{ attach_library('socialbase/select2') }}
  {% else %}
    {# Browsers do not recognize pseudo :after selectors, we must create a wrapper
     # around the select element to style it properly.
     # @see http://stackoverflow.com/q/21103542
     #}
    <div class="select-wrapper">
  {% endif %}

    {% set classes = ['form-control'] %}
    <select{{ attributes.addClass(classes) }}>
      {% for option in options %}
        {% if option.type == 'optgroup' %}
          <optgroup label="{{ option.label }}">
            {% for sub_option in option.options %}
              <option
                value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
            {% endfor %}
          </optgroup>
        {% elseif option.type == 'option' %}
          <option
            value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
        {% endif %}
      {% endfor %}
    </select>

  {% if not multiselect %}
    </div>
  {% endif %}

  {% if suffix %}
    {{ suffix }}
  {% endif %}

  {% if input_group %}
    </div>
  {% endif %}
{% endspaceless %}