🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

List Filter

A list of filterable search items.

View Demo

Dependencies

All components are based on CodyFrame.

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>

✅ Project duplicated

✅ Project created

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