templates/includes/form/multi-select.html.twig line 1

Open in your IDE?
  1. {% set labels = labels|default %}
  3. <div class="dropdown multi-select js-multi-select form-group mb-0 js-multiple-select-dropdown
  4. {{ mobileOnlyCheckboxes|default(false) ? 'multi-select--mobile-only-checkboxes' : '' }} {{ className|default('') }}"
  5.      data-multi-select-submit-on-hide="false">
  7.     <div class="mb-md-1 mb-4">
  8.         <div class="form-label mb-2">
  9.             {{ formLabel|default('form label') }}
  10.         </div>
  12.         {# achtung: wird nur mobil angezeigt   #}
  13.         {% if sublabel|default('form label') %}
  14.             <div class="multi-select__sub-label d-md-none">
  15.                 {{ sublabel }}
  16.             </div>
  17.         {% endif %}
  18.     </div>
  20.     <button class="form-control multi-select__button {{ labels ? 'has-value' : '' }} {{ mobileOnlyCheckboxes|default ? 'd-none d-md-block' : '' }}"
  21.             type="button" id="multipleSelectsDropdown-{{ id|default('multi-select-id') }}"
  22.             data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  24.         <span class="multi-select__label">{{ buttonLabel|default('Button Label') }}</span>
  25.         <span class="multi-select__values">
  26.             {% if labels %}
  27.                 {{ labels|join(', ')|default(buttonLabel|default(null)) }}
  28.             {% endif %}
  29.         </span>
  30.         <span class="multi-select__icon icon icon-chevron-down" aria-label="Arrow down"></span>
  31.     </button>
  33.     <div class="dropdown-menu js-multi-select__menu multi-select__menu  js-dropdown-persist {{ mobileOnlyCheckboxes|default(false) ? 'dropdown-menu--show-mobile' : '' }}"
  34.          aria-labelledby="multipleSelectsDropdown-{{ id|default('multi-select-id') }}">
  36.         <ul class="list-unstyled custom-scrollbar multi-select__list">
  37.             {% for option in options|default() %}
  38.                 <li class="multi-select__item">
  39.                     {{ include('includes/form/multi-select-checkbox.html.twig', {
  40.                         'id': option.id,
  41.                         'name': option.name,
  42.                         'value': option.value,
  43.                         'checked': option.checked|default() ? 'checked' : '',
  44.                         'required': false,
  45.                         'label' : option.label|default(),
  46.                         'inputModifier': 'js-multi-select__input',
  47.                     }, with_context = false) }}
  48.                 </li>
  49.             {% endfor %}
  50.         </ul>
  52.         <button type="submit" class="btn btn-dark w-100 multi-select__submit-btn {{ mobileOnlyCheckboxes|default(false) ? 'd-none d-md-block' : '' }}">
  53.             {{ 'form.filter'|trans }}
  54.         </button>
  55.     </div>
  56. </div>