Filter: Standard

WIP

HTML
View
Context
Assets
Info
Notes


        
        <form id="filters-48513-68516" class="filters" method="get">

    <div class="filters__search-term">
        <div id="filters-48513-68516-search-term" class="large-input has-overlay-link">
            <label for="filters-48513-68516-search-term-input" class="large-input__label">Suchbegriff</label>

            <input class="large-input__input" id="filters-48513-68516-search-term-input" name="q" type="search">
        </div>
    </div>

    <div class="filters__filters">

        <details id="filters-48513-68516-filter-1" class="filters__filter" open>
            <summary class="filters__filter-summary has-underline">
                <div class="filters__filter-summary-inner">
                    <span class="filters__filter-summary-text u-underline">Art der Förderung als checkbox-input</span>

                    <svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
                    </svg>
                </div>
            </summary>

            <div class="filters__filter-fields">
                <div class="filters__filter-field">

                    <fieldset id="filters-48513-68516-filter-1-field-1" class="field">
                        <legend class="field__label u-hidden-visually">
                            <span class="label">Wählen sie die Art der Förderung aus</span>
                        </legend>

                        <div id="filters-48513-68516-filter-1-field-1-errors" class="field__errors" hidden>
                            <div class="notice notice--error">
                                <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                                </svg>
                                <span class="notice__text"></span>
                            </div>
                        </div>

                        <div class="field__controls field__controls--stacked">
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-1-field-1-control-1-wrap" for="filters-48513-68516-filter-1-field-1-control-1">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-1-field-1-control-1" name="checkboxes" value="1" checked aria-required="false" aria-checked="true" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 1</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-1-field-1-control-2-wrap" for="filters-48513-68516-filter-1-field-1-control-2">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-1-field-1-control-2" name="checkboxes" value="2" checked aria-required="false" aria-checked="true" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 2</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-1-field-1-control-3-wrap" for="filters-48513-68516-filter-1-field-1-control-3">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-1-field-1-control-3" name="checkboxes" value="3" aria-required="false" aria-checked="false" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 3</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-1-field-1-control-4-wrap" for="filters-48513-68516-filter-1-field-1-control-4">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-1-field-1-control-4" name="checkboxes" value="4" aria-required="false" aria-checked="false" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 4</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-1-field-1-control-5-wrap" for="filters-48513-68516-filter-1-field-1-control-5">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-1-field-1-control-5" name="checkboxes" value="5" aria-required="false" aria-checked="false" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 5</span>
                                </label>
                            </div>
                        </div>

                        <div class="field__footer">

                        </div>
                    </fieldset>
                </div>
            </div>
        </details>

        <details id="filters-48513-68516-filter-2" class="filters__filter">
            <summary class="filters__filter-summary has-underline">
                <div class="filters__filter-summary-inner">
                    <span class="filters__filter-summary-text u-underline">Art der Förderung als radio-input</span>

                    <svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
                    </svg>
                </div>
            </summary>

            <div class="filters__filter-fields">
                <div class="filters__filter-field">

                    <fieldset id="filters-48513-68516-filter-2-field-1" class="field">
                        <legend class="field__label u-hidden-visually">
                            <span class="label">Wählen sie die Art der Förderung aus</span>
                        </legend>

                        <div id="filters-48513-68516-filter-2-field-1-errors" class="field__errors" hidden>
                            <div class="notice notice--error">
                                <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                                </svg>
                                <span class="notice__text"></span>
                            </div>
                        </div>

                        <div class="field__controls field__controls--stacked">
                            <div class="field__control">
                                <label class="radio" id="filters-48513-68516-filter-2-field-1-control-1" for="filters-48513-68516-filter-2-field-1-control-1-input">
                                    <input class="radio__input" id="filters-48513-68516-filter-2-field-1-control-1-input" name="radios" value="1" aria-required="false" aria-checked="false" type="radio" />

                                    <div class="radio__marker"></div>

                                    <span class="radio__label">Option 1</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="radio" id="filters-48513-68516-filter-2-field-1-control-2" for="filters-48513-68516-filter-2-field-1-control-2-input">
                                    <input class="radio__input" id="filters-48513-68516-filter-2-field-1-control-2-input" name="radios" value="2" aria-required="false" aria-checked="false" type="radio" />

                                    <div class="radio__marker"></div>

                                    <span class="radio__label">Option 2</span>
                                </label>
                            </div>
                            <div class="field__control">
                                <label class="radio" id="filters-48513-68516-filter-2-field-1-control-3" for="filters-48513-68516-filter-2-field-1-control-3-input">
                                    <input class="radio__input" id="filters-48513-68516-filter-2-field-1-control-3-input" name="radios" value="3" aria-required="false" aria-checked="false" type="radio" />

                                    <div class="radio__marker"></div>

                                    <span class="radio__label">Option 3</span>
                                </label>
                            </div>
                        </div>

                        <div class="field__footer">

                        </div>
                    </fieldset>
                </div>
            </div>
        </details>

        <details id="filters-48513-68516-filter-3" class="filters__filter">
            <summary class="filters__filter-summary has-underline">
                <div class="filters__filter-summary-inner">
                    <span class="filters__filter-summary-text u-underline">Art der Förderung als select</span>

                    <svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
                    </svg>
                </div>
            </summary>

            <div class="filters__filter-fields">
                <div class="filters__filter-field">

                    <div id="filters-48513-68516-filter-3-field-1" class="field">
                        <label class="field__label u-hidden-visually" for="filters-48513-68516-filter-3-field-1-control">
                            <span class="label">Wählen sie die Art der Förderung aus</span>
                        </label>

                        <div id="filters-48513-68516-filter-3-field-1-errors" class="field__errors" hidden>
                            <div class="notice notice--error">
                                <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                                </svg>
                                <span class="notice__text"></span>
                            </div>
                        </div>

                        <div class="field__controls field__controls--stacked">
                            <div class="field__control">
                                <div class="input">
                                    <div class="input__inner">
                                        <select class="input__input input__input--select" id="filters-48513-68516-filter-3-field-1-control" name="select">
                                            <option class="input__option" value="1">Option 1</option>
                                            <option class="input__option" value="2">Option 2</option>
                                            <option class="input__option" value="3">Option 3</option>
                                        </select> <svg class="icon icon--caret-down input__icon input__icon--select" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field__footer">

                        </div>
                    </div>
                </div>
            </div>
        </details>

        <div id="filters-48513-68516-filter-4" class="filters__filter">

            <div class="filters__filter-fields">
                <div class="filters__filter-field">

                    <div id="filters-48513-68516-filter-4-field-1" class="field">
                        <label class="field__label u-hidden-visually" for="filters-48513-68516-filter-4-field-1-control">
                            <span class="label">Filter without summary</span>
                        </label>

                        <div id="filters-48513-68516-filter-4-field-1-errors" class="field__errors" hidden>
                            <div class="notice notice--error">
                                <svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
                                </svg>
                                <span class="notice__text"></span>
                            </div>
                        </div>

                        <div class="field__controls field__controls--stacked">
                            <div class="field__control">
                                <label class="checkbox" id="filters-48513-68516-filter-4-field-1-control-wrap" for="filters-48513-68516-filter-4-field-1-control">
                                    <input class="checkbox__input" id="filters-48513-68516-filter-4-field-1-control" name="checkboxes" value="1" checked aria-required="false" aria-checked="true" type="checkbox" />

                                    <span class="checkbox__icon">
                                        <svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
                                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
                                        </svg> </span>

                                    <span class="checkbox__label">Option 1</span>
                                </label>
                            </div>
                        </div>

                        <div class="field__footer">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="filters__actions">
        <div class="filters__submit">
            <button class="button u-underline" type="submit">Filter anwenden</button>
        </div>

        <div class="filters__reset">
            <button class="button button--outline u-underline" type="reset" data-filters-reset>Filter entfernen</button>
        </div>
    </div>
</form>


        {% set withReset = withReset ?? true %}
{% set level = level ?? 2 %}
{% set id = id ??? html_id('filters') -%}

<form {{ html_attributes({
  id: id,
  class: 'filters',
  action: action ??? '',
  method: method ??? 'get',
}, attrs ?? {}) }}>
  {{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
  {{ actionMethod|default ? actionInput(actionMethod) }}
  {{ redirectUrl|default ? redirectInput(redirectUrl) }}

  {% for name, value in hiddenInputs|default %}
    {{ value ? hiddenInput(name, value) }}
  {% endfor %}

  {% if searchTerm|default %}
    <div class="filters__search-term">
      {% include '@large-input' with searchTerm | merge({
        id: 'search-term' | namespaceInputId(id),
        type: 'search',
      }) only %}
    </div>
  {% endif %}

  <div class="filters__filters">
    {% for filter in filters %}
      {% set filterId = "filter-#{loop.index}" | namespaceInputId(id) %}
      {% set summary = filter.summary ?? false %}
      {% set filterWrapperTag = summary ? 'details' : 'div' %}

      <{{ filterWrapperTag }} {{ html_attributes({
        id: filterId,
        class: 'filters__filter',
        open: summary ? (filter.open ?? false),
      }, filter.attrs ?? {}) }}>
        {% if summary %}
          <summary class="filters__filter-summary has-underline">
            <div class="filters__filter-summary-inner">
              <span class="filters__filter-summary-text u-underline">
                {{- summary -}}
              </span>

              {% include '@icon' with {
                icon: 'caret-down-alt',
                class: 'filters__filter-summary-icon',
              } only %}
            </div>
          </summary>
        {% endif %}

        <div class="filters__filter-fields">
          {% for field in filter.fields|default([]) %}
            <div class="filters__filter-field">
              {% include '@field' with {
                id: "field-#{loop.index}" | namespaceInputId(filterId),
                labelPosition: 'hidden',
              } | merge(field) only %}
            </div>
          {% endfor %}
        </div>
      </{{ filterWrapperTag }}>
    {% endfor %}
  </div>

  <div class="filters__actions">
    <div class="filters__submit">
      {% include '@button' with {
        type: 'submit',
        text: 'Apply filters' | t('site'),
      } | merge(submit ?? {}) only %}
    </div>

    {% if withReset %}
      <div class="filters__reset">
        {% include '@button' with {
          text: 'Clear all filters' | t('site'),
          type: 'reset',
          outline: true,
          attrs: {
            'data-filters-reset': true,
          },
        } only %}
      </div>
    {% endif %}
  </div>
</form>


        
            
            {
  "searchTerm": {
    "name": "q",
    "label": "Suchbegriff"
  },
  "filters": [
    {
      "summary": "Art der Förderung als checkbox-input",
      "open": true,
      "fields": [
        {
          "label": "Wählen sie die Art der Förderung aus",
          "type": "checkboxes",
          "name": "checkboxes",
          "controls": [
            {
              "use": "@checkbox",
              "value": 1,
              "label": "Option 1",
              "checked": true
            },
            {
              "use": "@checkbox",
              "value": 2,
              "label": "Option 2",
              "checked": true
            },
            {
              "use": "@checkbox",
              "value": 3,
              "label": "Option 3"
            },
            {
              "use": "@checkbox",
              "value": 4,
              "label": "Option 4"
            },
            {
              "use": "@checkbox",
              "value": 5,
              "label": "Option 5"
            }
          ]
        }
      ]
    },
    {
      "summary": "Art der Förderung als radio-input",
      "fields": [
        {
          "label": "Wählen sie die Art der Förderung aus",
          "instructions": false,
          "type": "radio",
          "name": "radios",
          "controls": [
            {
              "use": "@radio",
              "value": 1,
              "label": "Option 1"
            },
            {
              "use": "@radio",
              "value": 2,
              "label": "Option 2"
            },
            {
              "use": "@radio",
              "value": 3,
              "label": "Option 3"
            }
          ]
        }
      ]
    },
    {
      "summary": "Art der Förderung als select",
      "fields": [
        {
          "label": "Wählen sie die Art der Förderung aus",
          "instructions": false,
          "type": "select",
          "name": "select",
          "controls": [
            {
              "use": "@input",
              "type": "select",
              "options": [
                {
                  "value": 1,
                  "label": "Option 1"
                },
                {
                  "value": 2,
                  "label": "Option 2"
                },
                {
                  "value": 3,
                  "label": "Option 3"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "fields": [
        {
          "label": "Filter without summary",
          "type": "checkboxes",
          "name": "checkboxes",
          "controls": [
            {
              "use": "@checkbox",
              "value": 1,
              "label": "Option 1",
              "checked": true
            }
          ]
        }
      ]
    }
  ]
}

File:

Content:


                                :root {
  --filters-icon-color: var(--color-orange);
  --filters-icon-rotate: 0deg;
  --filters-line-color: var(--color-grey-light);
}

.filters {
  display: grid;
  gap: 4rem;
}

.filters__filter {
  border-block: 2px solid var(--filters-line-color);
  padding-block: 1rem;

  &[open] {
    --filters-icon-rotate: 180deg;
  }

  &:not(:last-child) {
    border-block-end: 0;
  }

  &:has(.filters__filter-summary) {
    padding-block: 2rem;
  }
}

.filters__filter-summary {
  appearance: none;
  display: block;
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  user-select: none;

  &::-webkit-details-marker,
  &::marker {
    display: none;
  }
}

.filters__filter-summary-inner {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.filters__filter-summary-icon {
  color: var(--filters-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 0;
  transform: rotate(var(--filters-icon-rotate));
  transition-property: transform;
}

.filters__filter-fields {
  padding-block: 1.5rem;
}

.filters__filter-field {
  & + & {
    margin-block-start: 2rem;
  }
}

.filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

URL: /components/raw/filters/filters.scss
Filesystem Path: src/components/3-organisms/filters/filters.scss
Size: 1.2 KB

Content:


                                import { on } from 'delegated-events';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';

on('click', 'summary.filters__filter-summary', (event) => {
  const { currentTarget: $summary } = event;

  invisibleFocus($summary);
});

on('click', '[data-filters-reset]', (event) => {
  const { currentTarget: $reset } = event;
  const $filters = $reset.closest<HTMLFormElement>('.filters');

  // Prevent default reset function
  event.preventDefault();

  // Set invisible focus
  invisibleFocus($reset);

  // Resets all input, textarea, select, checkbox, and radio fields
  $filters
    ?.querySelectorAll<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >('input, textarea, select')
    ?.forEach(($input) => {
      if ($input instanceof HTMLSelectElement) {
        $input.selectedIndex = -1;
      } else if (
        $input instanceof HTMLInputElement &&
        ($input.type === 'checkbox' || $input.type === 'radio')
      ) {
        $input.checked = false;
      } else {
        $input.value = '';
      }
    });

  // Submit form
  $filters?.submit();
});

URL: /components/raw/filters/filters.ts
Filesystem Path: src/components/3-organisms/filters/filters.ts
Size: 1.1 KB

Handle: @filters--default
Variants (2): Standard , Invertiert
Preview:
- With layout
- Component only
Filesystem Path: src/components/3-organisms/filters/filters.twig
References (4): @large-input, @icon, @field, @button
Referenced by (5): @extended-table, @search-box, @search-box--filtered, @search-box--toggle, @search-box--suggestions

No notes defined.