Go to homepage

Projects /

List Filter

A list of filterable search items.

View Demo

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>

    <!-- other list items here -->

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 -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.