List Filter

A list of filterable search items.

How to

The List Filter component is a list of items that can be filtered using a search input.

By default, the content of the .js-list-filter__label element is used when searching, but you can add more tags using a data-filter-tags attribute:

<div class="list-filter__list-wrapper">
  <ul class="list-filter__list">
    <li class="list-filter__item js-list-filter__item" data-filter-tags="tag1 tag2 tag3">
      <p class="js-list-filter__label">Item 1</p>
    </li>

    <!-- other list items here -->
  </ul>
</div>

When the search input is changed and the list of results is updated, the content of the .js-list-filter__results-nr element is set equal to the number of available results:

<div class="list-filter js-list-filter">
  <p aria-live="polite" aria-atomic="true"><span class="js-list-filter__results-nr">3</span> results found</p>

  <!-- search input and list here -->
</div>

Categories

• Content and Layout > Filter
• Forms > Form Elements

Bug report & feedback

Component Github page ↗