Europa Component Library

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 '@ec-europa/ecl-search-forms' with { 'variant': 'internal' } %}
    </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 '@ec-europa/ecl-forms-forms' with { 'extra_attributes': [{ 'name': 'action', 'value': '#' }, { 'name': 'method', 'value': 'get'  }, { 'name': 'id', 'value': 'form-filter' } ] } %}
          {% block form %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Keyword', 'for_attribute': 'filter-keywords' } %}
                {% include '@ec-europa/ecl-forms-text-inputs' with {
                  'type': 'text',
                  'name': 'keywords',
                  'id': 'filter-keywords',
                  'extraAttributes': [
                    { 'value': '', 'size': '30', 'maxlength': '128' }
                  ]
                } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Topic', 'for_attribute': 'filter-topic' } %}
                {% embed '@ec-europa/ecl-forms-selects' with { 'name': 'topic', 'id': 'filter-topic' } %}
                  {% 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 '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Location', 'for_attribute': 'filter-location' } %}
                {% embed '@ec-europa/ecl-forms-selects' with { 'name': 'location', 'id': 'filter-location' } %}
                  {% 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 '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-checkboxes' with {
                  'name': 'event_is_online',
                  'id': 'event_is_online',
                  'label': 'Online only events'
                } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-checkboxes' with {
                  'name': 'event_is_live_streaming',
                  'id': 'event_is_live_streaming',
                  'label': 'Events with live streaming available',
                  'checked': true
                } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Organiser', 'for_attribute': 'filter-organiser' } %}
                {% embed '@ec-europa/ecl-forms-selects' with { 'name': 'organiser', 'id': 'filter-organiser' } %}
                  {% 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 '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'After', 'for_attribute': 'filter-after' } %}
                {% include '@ec-europa/ecl-datepickers' with { 'id': 'filter-after' } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Before', 'for_attribute': 'filter-before' } %}
                {% include '@ec-europa/ecl-datepickers' with { 'id': 'filter-before' } %}
              {% endblock %}
            {% endembed %}
            {% embed '@ec-europa/ecl-forms-form-groups' %}
              {% block form_group %}
                {% include '@ec-europa/ecl-forms-labels' with { 'label': 'Collection', 'for_attribute': 'filter-collection' } %}
                {% embed '@ec-europa/ecl-forms-selects' with { 'name': 'collection', 'id': 'filter-collection' } %}
                  {% 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 '@ec-europa/ecl-buttons' with {
              'modifier': 'primary',
              'label': 'Refine results',
              'is_block': true,
              'extra_classes': 'ecl-u-mt-s',
              'extra_attributes': [
                { 'name': 'value', 'value': 'Refine results'},
                { 'name': 'type', 'value': 'submit'}
              ]
            } %}
            {% include '@ec-europa/ecl-buttons' with {
              'modifier': 'default',
              'label': 'Clear filters',
              'is_block': true,
              'extra_classes': 'ecl-u-mt-s',
              'extra_attributes': [
                { 'name': 'value', 'value': 'Clear filters'},
                { 'name': 'type', 'value': 'reset'}
              ]
            } %}
          {% 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 '@ec-europa/ecl-tags' with {
        'modifier': 'facet-close',
        'label': 'Live streaming available',
        'tags': [{ 'value': 'Yes'}]
      } %}
      <section class="ecl-u-mv-m">CONTENT HERE</section>

      {% include '@ec-europa/ecl-pagers' with {
        'current_page': 1,
        'max_page': 20
      } %}
    </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 class="ecl-button ecl-button--form-primary ecl-search-form__button" type="submit">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" action="#" method="get" id="form-filter"><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" action="#" method="get" id="form-filter"><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" action="#" method="get" id="form-filter"><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-datepickers"><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-datepickers__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-datepickers"><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-datepickers__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" action="#" method="get" id="form-filter"><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 class="ecl-button ecl-button--primary ecl-button--block ecl-u-mt-s" value="Refine results" type="submit">Refine results</button>

        <button class="ecl-button ecl-button--default ecl-button--block ecl-u-mt-s" value="Clear filters" type="reset">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>

        <button class="ecl-button ecl-button--facet-close ecl-tag__item" type="button">Yes</button>
      </div>
      <section class="ecl-u-mv-m">CONTENT HERE</section>

      <nav class="ecl-pager__wrapper" aria-label="pagination">
        <ul class="ecl-pager">

          <li class="ecl-pager__item ecl-pager__item--current" aria-current="page">
            <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: @ec-europa/ecl-filters
  • Tags: template
  • Preview:
  • Filesystem Path: framework/templates/ecl-filters/ecl-filters.twig