EU System

Filters

Documentation • Demo

Filters

When and how to use

When a list or collection of content items with shared characteristics is too large, filters allow users to narrow the scope of the displayed items.

  • the filter has a H3 title and consists of input fields (with labels) and a ‘clear all’ action button
  • all filter only allow for single select. This means that per search, only 1 value can be selected
  • the first filter should always be a search field labeled Keywords
  • always use a vertical, 1 column layout
  • selecting a value in an input field automatically refreshes the list of displayed items
{#
  This is an example and should not be used as it is.
#}

<div class="ecl-container ecl-u-mv-l">
  <div class="ecl-row ecl-u-mb-l">
    <div class="ecl-col">
      {% include '@ecl/eu-component-search-form' with { 'variant': 'internal' } only %}
    </div>
  </div>
  <div class="ecl-row">
    <aside class="ecl-col-lg-3" role="complementary">
      <h3 class="ecl-heading ecl-heading--h3">Filter by</h3>
        {% embed '@ecl/eu-component-form-form' with { 'extra_attributes': [{ 'name': 'action', 'value': '#' }, { 'name': 'method', 'value': 'get'  }, { 'name': 'id', 'value': 'form-filter' } ] } only %}
          {% block form %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Keyword', 'for_attribute': 'filter-keywords' } only %}
                {% include '@ecl/eu-component-form-text-input' with {
                  'type': 'text',
                  'name': 'keywords',
                  'id': 'filter-keywords',
                  'extra_attributes': [
                    { 'value': '', 'size': '30', 'maxlength': '128' }
                  ]
                } only %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Topic', 'for_attribute': 'filter-topic' } only %}
                {% embed '@ecl/eu-component-form-select' with { 'name': 'topic', 'id': 'filter-topic' } only %}
                  {% block options %}
                    <option value="0">Any topic</option>
                    <option value="354">Banking and financial services</option>
                    <option value="369">Environment</option>
                    <option value="382">Research and innovation</option>
                  {% endblock %}
                {% endembed %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Location', 'for_attribute': 'filter-location' } only %}
                {% embed '@ecl/eu-component-form-select' with { 'name': 'location', 'id': 'filter-location' } only %}
                  {% block options %}
                  <option value="0">Any country</option>
                  <option value="BE">Belgium</option>
                  <option value="ES">Spain</option>
                  <option value="RO">Romania</option>
                  <option value="IT">Italy</option>
                  <option value="PT">Portugal</option>
                  <option value="HR">Croatia</option>
                  <option value="FI">Finland</option>
                  <option value="DE">Germany</option>
                  <option value="IE">Ireland</option>
                  <option value="PL">Poland</option>
                  <option value="BG">Bulgaria</option>
                  <option value="GR">Greece</option>
                  <option value="NL">Netherlands</option>
                  <option value="SK">Slovakia</option>
                  <option value="SE">Sweden</option>
                  <option value="EE">Estonia</option>
                  <option value="AT">Austria</option>
                  <option value="CY">Cyprus</option>
                  <option value="DK">Denmark</option>
                  <option value="FR">France</option>
                  <option value="HU">Hungary</option>
                  <option value="LV">Latvia</option>
                  <option value="LT">Lithuania</option>
                  <option value="LU">Luxembourg</option>
                  <option value="MT">Malta</option>
                  {% endblock %}
                {% endembed %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-checkbox' with {
                  'name': 'event_is_online',
                  'id': 'event_is_online',
                  'label': 'Online only events'
                } only %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-checkbox' with {
                  'name': 'event_is_live_streaming',
                  'id': 'event_is_live_streaming',
                  'label': 'Events with live streaming available',
                  'checked': true
                } only %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Organiser', 'for_attribute': 'filter-organiser' } only %}
                {% embed '@ecl/eu-component-form-select' with { 'name': 'organiser', 'id': 'filter-organiser' } only %}
                  {% block options %}
                    <option value="0">Any organiser</option>
                    <option value="881">Financial Stability, Financial Services and Capital Markets Union</option>
                    <option value="932">Translation</option>
                    <option value="189">Internal Audit Service</option>
                    <option value="746">Interpretation</option>
                  {% endblock %}
                {% endembed %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'After', 'for_attribute': 'filter-after' } only %}
                {% include '@ecl/eu-component-datepicker' with { 'id': 'filter-after' } only %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Before', 'for_attribute': 'filter-before' } only %}
                {% include '@ecl/eu-component-datepicker' with { 'id': 'filter-before' } only %}
              {% endblock %}
            {% endembed %}
            {% embed '@ecl/eu-component-form-form-group' with {} only %}
              {% block form_group %}
                {% include '@ecl/eu-component-form-label' with { 'label': 'Collection', 'for_attribute': 'filter-collection' } only %}
                {% embed '@ecl/eu-component-form-select' with { 'name': 'collection', 'id': 'filter-collection' } only %}
                  {% block options %}
                    <option value="0">Any collection</option>
                    <option value="2065">Citizens' Dialogues</option>
                    <option value="48422">Cities events</option>
                    <option value="35343">FISMA Events collectoin</option>
                    <option value="54309">Sustainable Development Goals</option>
                  {% endblock %}
                {% endembed %}
              {% endblock %}
            {% endembed %}
            {% include '@ecl/eu-component-button' with {
              'modifier': 'primary',
              'label': 'Refine results',
              'is_block': true,
              'extra_classes': 'ecl-u-mt-s',
              'extra_attributes': [
                { 'name': 'value', 'value': 'Refine results'}
              ]
            } only %}
            {% include '@ecl/eu-component-button' with {
              'modifier': 'default',
              'type_attribute': 'reset',
              'label': 'Clear filters',
              'is_block': true,
              'extra_classes': 'ecl-u-mt-s',
              'extra_attributes': [
                { 'name': 'value', 'value': 'Clear filters'}
              ]
            } only %}
          {% endblock %}
        {% endembed %}
        <h3 class="ecl-heading ecl-heading--h3">Filter by topic</h3>
        <p class="ecl-paragraph">Custom component</p>
    </aside>
    <section class="ecl-col-lg-9">
      <div class="ecl-heading ecl-heading--h2 ecl-u-mb-m">Events (90)</div>
      {% include '@ecl/eu-component-tag' with {
        'modifier': 'facet-close',
        'label': 'Live streaming available',
        'tags': [{ 'value': 'Yes', 'href': '../../example.html#remove-filter' }]
      } only %}
      <section class="ecl-u-mv-m">CONTENT HERE</section>
      {% include '@ecl/eu-component-pager' with {
        'current_page': 1,
        'max_page': 20
      } only %}
    </section>
  </div>
</div>
 
{
  "_demo": {
    "scripts": "\n        </script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js\"></script>\n        <script type=\"text/javascript\">\n          var pickerBefore = new Pikaday({\n            field: document.getElementById('filter-before'),\n            firstDay: 1,\n            maxDate: new Date(2020, 12, 31),\n            theme: 'ecl-pika-theme',\n            yearRange: [2000, 2020],\n          });\n          var pickerAfter = new Pikaday({\n            field: document.getElementById('filter-after'),\n            firstDay: 1,\n            maxDate: new Date(2020, 12, 31),\n            theme: 'ecl-pika-theme',\n            yearRange: [2000, 2020],\n          });\n        </script>\n        <script>\n      "
  }
}
 
<div class="ecl-container ecl-u-mv-l">
  <div class="ecl-row ecl-u-mb-l">
    <div class="ecl-col">

      <form class="ecl-search-form ecl-search-form--internal">
        <label class="ecl-search-form__textfield-wrapper">
          <span class="ecl-u-sr-only">Search this website</span>

          <input type="search" class="ecl-text-input ecl-search-form__textfield" id="search" name="default-name" />
        </label>

        <button type="submit" class="ecl-button ecl-button--form-primary ecl-search-form__button">Search</button>
      </form>
    </div>
  </div>
  <div class="ecl-row">
    <aside class="ecl-col-lg-3" role="complementary">
      <h3 class="ecl-heading ecl-heading--h3">Filter by</h3>

      <form class="ecl-form" action="#" method="get" id="form-filter">

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-keywords">Keyword</label>

          <input type="text" class="ecl-text-input" id="filter-keywords" name="keywords"="" />
        </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-topic">Topic</label>

          <select class="ecl-select" id="filter-topic" name="topic">
            <option value="0">Any topic</option>
            <option value="354">Banking and financial services</option>
            <option value="369">Environment</option>
            <option value="382">Research and innovation</option>
          </select> </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-location">Location</label>

          <select class="ecl-select" id="filter-location" name="location">
            <option value="0">Any country</option>
            <option value="BE">Belgium</option>
            <option value="ES">Spain</option>
            <option value="RO">Romania</option>
            <option value="IT">Italy</option>
            <option value="PT">Portugal</option>
            <option value="HR">Croatia</option>
            <option value="FI">Finland</option>
            <option value="DE">Germany</option>
            <option value="IE">Ireland</option>
            <option value="PL">Poland</option>
            <option value="BG">Bulgaria</option>
            <option value="GR">Greece</option>
            <option value="NL">Netherlands</option>
            <option value="SK">Slovakia</option>
            <option value="SE">Sweden</option>
            <option value="EE">Estonia</option>
            <option value="AT">Austria</option>
            <option value="CY">Cyprus</option>
            <option value="DK">Denmark</option>
            <option value="FR">France</option>
            <option value="HU">Hungary</option>
            <option value="LV">Latvia</option>
            <option value="LT">Lithuania</option>
            <option value="LU">Luxembourg</option>
            <option value="MT">Malta</option>
          </select> </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label ecl-checkbox"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="event_is_online" value="" name="event_is_online" /><span class="ecl-checkbox__label">Online only events</span></label> </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label ecl-checkbox"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="event_is_live_streaming" value="" name="event_is_live_streaming" checked /><span class="ecl-checkbox__label">Events with live streaming available</span></label> </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-organiser">Organiser</label>

          <select class="ecl-select" id="filter-organiser" name="organiser">
            <option value="0">Any organiser</option>
            <option value="881">Financial Stability, Financial Services and Capital Markets Union</option>
            <option value="932">Translation</option>
            <option value="189">Internal Audit Service</option>
            <option value="746">Interpretation</option>
          </select> </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-after">After</label>

          <div class="ecl-datepicker"><input type="text" class="ecl-text-input" id="filter-after" name="datepicker" aria-label="Use the arrow keys to pick a date" value="" /><span class="ecl-datepicker__icon ecl-icon ecl-icon--calendar"></span></div>
        </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-before">Before</label>

          <div class="ecl-datepicker"><input type="text" class="ecl-text-input" id="filter-before" name="datepicker" aria-label="Use the arrow keys to pick a date" value="" /><span class="ecl-datepicker__icon ecl-icon ecl-icon--calendar"></span></div>
        </div>

        <div class="ecl-form-group">

          <label class="ecl-form-label" for="filter-collection">Collection</label>

          <select class="ecl-select" id="filter-collection" name="collection">
            <option value="0">Any collection</option>
            <option value="2065">Citizens' Dialogues</option>
            <option value="48422">Cities events</option>
            <option value="35343">FISMA Events collectoin</option>
            <option value="54309">Sustainable Development Goals</option>
          </select> </div>

        <button type="submit" class="ecl-button ecl-button--primary ecl-button--block ecl-u-mt-s" value="Refine results">Refine results</button>

        <button type="reset" class="ecl-button ecl-button--default ecl-button--block ecl-u-mt-s" value="Clear filters">Clear filters</button>
      </form>
      <h3 class="ecl-heading ecl-heading--h3">Filter by topic</h3>
      <p class="ecl-paragraph">Custom component</p>
    </aside>
    <section class="ecl-col-lg-9">
      <div class="ecl-heading ecl-heading--h2 ecl-u-mb-m">Events (90)</div>

      <div class="ecl-tag ecl-tag--facet-close">
        <span class="ecl-tag__label">Live streaming available</span>
        <a class="ecl-tag__item" href="../../example.html#remove-filter">Yes</a>
      </div>
      <section class="ecl-u-mv-m">CONTENT HERE</section>

      <nav class="ecl-pager" aria-label="Pagination navigation">
        <ul class="ecl-pager__list">
          <li class="ecl-pager__item ecl-pager__item--current" aria-current="true">
            <span class="ecl-pager__item-text">Page</span> 1
          </li>
          <li class="ecl-pager__item">
            <a class="ecl-pager__link" title="Go to page 2" href="/page=2">
              <span class="ecl-u-sr-only">Page </span>2
            </a>
          </li>
          <li class="ecl-pager__item">
            <a class="ecl-pager__link" title="Go to page 3" href="/page=3">
              <span class="ecl-u-sr-only">Page </span>3
            </a>
          </li>
          <li class="ecl-pager__item ecl-pager__item--ellipsis">…</li>
          <li class="ecl-pager__item ecl-pager__item--last">
            <a class="ecl-pager__link" title="Go to page 20" href="/page=20">
              <span class="ecl-u-sr-only">Page </span>20
            </a>
          </li>
          <li class="ecl-pager__item ecl-pager__item--next">
            <a class="ecl-pager__link" title="Go to next page" href="/page=2">Next ›</a>
          </li>
        </ul>
      </nav>
    </section>
  </div>
</div>
  • Handle: @ecl/eu-template-filter
  • Tags: template
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-template/eu-template-filter/eu-template-filter.twig