multiselect

// src/components/elements/multiselect/multiselect.html.twig

<fieldset class="MultiSelect js-MultiSelect{% if class %} {{ class }}{% endif %}">
  <legend id="{{ label.id }}" class="MultiSelect-label u-typo-copy-small">{{ label.title }}</legend>
  <button type="button" aria-labelledby="{{ label.id }}" class="MultiSelect-summary u-typo-copy js-MultiSelect-summary" data-placeholder="Alle"></button>
  <div class="MultiSelect-dropdown js-MultiSelect-dropdown">
    <div class="MultiSelect-items">
      {% for option in options %}
        {{ option|raw }}
      {% endfor %}
      <span class="js-Multiselect-resetButton MultiSelect-resetButton u-hiddenVisually">
        {% include "@elements/icon/icon.html.twig" with {
          name: "cross",
          class: "MultiSelect-resetButtonIcon"
        } only %}
        Zurücksetzen
      </span>
    </div>
  </div>
  <div class="MultiSelect-error u-typo-copy-small-bold" role="alert">{{ error }}</div>
  {#
    To hide the dropbox as fast as possible if javascript is enabled in the browser
    <script> tag should be placed inside <fieldset> since the whole <fieldset> element will be placed in the grid and
    if <script> is outside of <fieldset> it will be count as a separated grid child element
  #}
  <script>
    document.querySelector('.js-MultiSelect-summary[aria-labelledby="{{ label.id }}"] + .js-MultiSelect-dropdown').classList.add("u-hiddenVisually");
    document.querySelector('.js-MultiSelect-summary[aria-labelledby="{{ label.id }}"]').setAttribute("aria-expanded", "false");
  </script>
</fieldset>