file select.html.twig

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()
Source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for a select element.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the select tag.
  8. * - input_group: Flag to display as an input group.
  9. * - options: The option element children.
  10. * - prefix: Markup to display before the input element.
  11. * - suffix: Markup to display after the input element.
  12. *
  13. * @ingroup templates
  14. *
  15. * @see template_preprocess_select()
  16. */
  17. #}
  18. {% spaceless %}
  19. {% if input_group %}
  20. <div class="input-group">
  21. {% endif %}
  22. {% if prefix %}
  23. {{ prefix }}
  24. {% endif %}
  25. {# Browsers do not recognize pseudo :after selectors, we must create a wrapper
  26. # around the select element to style it properly.
  27. # @see http://stackoverflow.com/q/21103542
  28. #}
  29. {% if not attributes.offsetExists('multiple') %}
  30. <div class="select-wrapper">
  31. {% endif %}
  32. {% set classes = ['form-control'] %}
  33. <select{{ attributes.addClass(classes) }}>
  34. {% for option in options %}
  35. {% if option.type == 'optgroup' %}
  36. <optgroup label="{{ option.label }}">
  37. {% for sub_option in option.options %}
  38. <option
  39. value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
  40. {% endfor %}
  41. </optgroup>
  42. {% elseif option.type == 'option' %}
  43. <option
  44. value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
  45. {% endif %}
  46. {% endfor %}
  47. </select>
  48. {% if not attributes.offsetExists('multiple') %}
  49. </div>
  50. {% endif %}
  51. {% if suffix %}
  52. {{ suffix }}
  53. {% endif %}
  54. {% if input_group %}
  55. </div>
  56. {% endif %}
  57. {% endspaceless %}

Related topics