fs-list

Supercharge your Webflow CMS and static lists with filtering, sorting, pagination, and search

Overview

The fs-list attribute transforms Webflow CMS and static lists into powerful, interactive components with advanced filtering, sorting, search, and pagination capabilities.

Basic Setup

List Structure

Add the fs-list-element attribute to define the key elements of your list:

<!-- List container -->
<div fs-list-element="list">
  <!-- List item -->
  <div fs-list-element="item">
    <!-- Item content -->
    <div fs-list-field="name">Item Name</div>
    <div fs-list-field="category">Category</div>
  </div>
</div>

Wrapper Element

Optionally wrap your list with a wrapper element to contain all related components:

<div fs-list-element="wrapper">
  <!-- Filters form -->
  <form fs-list-element="filters">
    <!-- Filter inputs -->
  </form>
  
  <!-- List -->
  <div fs-list-element="list">
    <div fs-list-element="item">...</div>
  </div>
</div>

Filtering

Basic Filter

Create filters by adding form inputs with the fs-list-field attribute:

<form fs-list-element="filters">
  <!-- Text filter -->
  <input type="text" fs-list-field="name" placeholder="Search by name">
  
  <!-- Select filter -->
  <select fs-list-field="category">
    <option value="">All Categories</option>
    <option value="design">Design</option>
    <option value="development">Development</option>
  </select>
</form>

Filter Operators

Control how filters match values using the fs-list-operator attribute:

<!-- Contains (default for text) -->
<input type="text" fs-list-field="title" fs-list-operator="contain">

<!-- Exact match -->
<input type="text" fs-list-field="status" fs-list-operator="equal">

<!-- Starts with -->
<input type="text" fs-list-field="prefix" fs-list-operator="start">

<!-- Greater than -->
<input type="number" fs-list-field="price" fs-list-operator="greater">

Available operators: equal, not-equal, contain, not-contain, start, not-start, end, not-end, greater, greater-equal, less, less-equal, empty, not-empty

Filter Matching Logic

Control how multiple filter values are matched:

<!-- Match ANY value (OR logic) -->
<select fs-list-field="tags" fs-list-filtermatch="or" multiple>
  <option value="javascript">JavaScript</option>
  <option value="typescript">TypeScript</option>
</select>

<!-- Match ALL values (AND logic) -->
<select fs-list-field="tags" fs-list-filtermatch="and" multiple>
  <option value="javascript">JavaScript</option>
  <option value="typescript">TypeScript</option>
</select>

Filter Timing

Control when filtering is triggered:

<!-- Filter on every input (default) -->
<form fs-list-element="filters" fs-list-filteron="input">

<!-- Filter on change only -->
<form fs-list-element="filters" fs-list-filteron="change">

<!-- Filter on form submit -->
<form fs-list-element="filters" fs-list-filteron="submit">

Debouncing

Add a delay to filter inputs to improve performance:

<!-- Wait 500ms after user stops typing -->
<input type="text" fs-list-field="search" fs-list-debounce="500">

Clear Filters

Add a button to clear all filters:

<!-- Clear all filters -->
<button fs-list-element="clear">Clear All</button>

<!-- Clear specific filter -->
<button fs-list-element="clear" fs-list-field="category">Clear Category</button>

Fuzzy Search

Enable fuzzy matching for more forgiving search:

<!-- Enable fuzzy search with threshold -->
<input type="text" fs-list-field="title" fs-list-fuzzy="0.8">

Fuzzy ratio ranges from 0 to 1. Lower values are more forgiving (e.g., 0.3), higher values require closer matches (e.g., 0.9).

Sorting

Sort Triggers

Add clickable elements to sort your list:

<!-- Sort by name -->
<button fs-list-element="sort-trigger" fs-list-field="name">Sort by Name</button>

<!-- Sort by date -->
<button fs-list-element="sort-trigger" fs-list-field="date">Sort by Date</button>

<!-- Reverse sort (descending first) -->
<button fs-list-element="sort-trigger" fs-list-field="price" fs-list-reverse="true">Price</button>

Field Types

Specify the data type for proper sorting:

<!-- Number field -->
<div fs-list-field="price" fs-list-fieldtype="number">$99</div>

<!-- Date field -->
<div fs-list-field="published" fs-list-fieldtype="date">2024-01-15</div>

<!-- Text field (default) -->
<div fs-list-field="title">Title</div>

Sort Classes

Customize the CSS classes applied to active sort triggers:

<div fs-list-element="list" 
     fs-list-ascclass="is-ascending" 
     fs-list-descclass="is-descending">
  <button fs-list-element="sort-trigger" fs-list-field="name">
    Sort Name
  </button>
</div>

Pagination

Load More

Add a button to load more items:

<div fs-list-element="list" fs-list-load="more" fs-list-loadcount="6">
  <div fs-list-element="item">...</div>
</div>

<button fs-list-element="pagination-next">Load More</button>

Infinite Scroll

Automatically load items as user scrolls:

<div fs-list-element="list" 
     fs-list-load="infinite" 
     fs-list-loadcount="6"
     fs-list-threshold="-100">
  <div fs-list-element="item">...</div>
</div>

The fs-list-threshold value (in pixels) determines how close to the bottom of the list the user must scroll before loading more items. Negative values trigger loading before reaching the exact bottom.

Pagination Buttons

Create numbered page navigation:

<div fs-list-element="list" fs-list-load="pagination" fs-list-loadcount="10">
  <div fs-list-element="item">...</div>
</div>

<div fs-list-element="pagination-wrapper">
  <button fs-list-element="pagination-previous">Previous</button>
  
  <!-- Page button template -->
  <a fs-list-element="page-button">1</a>
  
  <!-- Page dots separator -->
  <span fs-list-element="page-dots">...</span>
  
  <button fs-list-element="pagination-next">Next</button>
</div>

Pagination Configuration

Control how page numbers are displayed:

<div fs-list-element="list" 
     fs-list-load="pagination"
     fs-list-pagesiblings="2"
     fs-list-pageboundary="1">

• fs-list-pagesiblings: Number of pages to show on each side of current page
• fs-list-pageboundary: Number of pages to show at start and end

Custom Items Per Page

Override Webflow’s pagination settings:

<div fs-list-element="list" fs-list-itemsperpage="12">
  <div fs-list-element="item">...</div>
</div>

Display Elements

Empty State

Show a message when no items match filters:

<div fs-list-element="empty" style="display: none;">
  <p>No results found. Try adjusting your filters.</p>
</div>

Initial State

Show content before any filters are applied:

<div fs-list-element="initial">
  <p>Use the filters above to search our collection.</p>
</div>

Results Count

Display the number of filtered results:

<div fs-list-element="results-count">0</div> results found

Items Count

Display total number of items:

Showing <span fs-list-element="visible-count">10</span> 
of <span fs-list-element="items-count">100</span> items

Visible Range

Show the range of currently visible items:

Items <span fs-list-element="visible-count-from">1</span> 
to <span fs-list-element="visible-count-to">10</span>

Loader

Show a loading indicator during operations:

<div fs-list-element="loader" style="display: none;">
  <div class="spinner">Loading...</div>
</div>

Animation & Effects

Animation Duration

Set the animation duration for list changes:

<div fs-list-element="list" 
     fs-list-duration="500" 
     fs-list-easing="ease-in-out">

Stagger Effect

Add a stagger delay to items:

<div fs-list-element="list" fs-list-stagger="50">
  <!-- Each item animates with 50ms delay -->
</div>

Scroll Anchors

Scroll to specific positions after list operations:

<!-- General scroll anchor -->
<div fs-list-element="scroll-anchor"></div>

<!-- Specific anchors for different actions -->
<div fs-list-element="scroll-anchor-filter"></div>
<div fs-list-element="scroll-anchor-sort"></div>
<div fs-list-element="scroll-anchor-pagination"></div>

Highlight Matches

Highlight matching text in search results:

<div fs-list-element="list" 
     fs-list-highlight="true"
     fs-list-highlightclass="highlight">

Advanced Features

Field Matching

Define how multiple fields are matched:

<!-- Search across multiple fields with OR logic -->
<div fs-list-field="title,description" fs-list-fieldmatch="or">Content</div>

Facet Counts

Show predicted result counts for filters:

<button fs-list-field="category" fs-list-value="design">
  Design <span fs-list-element="facet-count">0</span>
</button>

Empty Facet Handling

Control behavior when a filter has no results:

<div fs-list-element="list" 
     fs-list-emptyfacet="hide"
     fs-list-emptyfacetclass="is-empty">

Custom Values

Set custom values for checkboxes and radio buttons:

<input type="checkbox" 
       fs-list-field="tags" 
       fs-list-value="javascript">

Split Values

Split field values by a separator:

<!-- Split by commas -->
<div fs-list-field="tags" fs-list-split=",">design, webflow, cms</div>

<!-- Split by spaces -->
<div fs-list-field="keywords" fs-list-split="true">web design tutorial</div>

Combine Lists

Combine multiple list instances:

<div fs-list-element="list" fs-list-instance="products">...</div>
<div fs-list-element="list" fs-list-combine="products">...</div>

Reset Webflow IX2

Reset Webflow interactions when rendering items:

<div fs-list-element="list" fs-list-resetix="true">

URL Query Parameters

Sync pagination state with URL:

<div fs-list-element="list" 
     fs-list-load="pagination" 
     fs-list-showquery="true">

State Classes

The following CSS classes are automatically applied during list operations:

• is-list-filtering: Applied during filtering
• is-list-loading: Applied during pagination
• is-list-sorting: Applied during sorting
• is-list-starting: Applied to items before rendering
• is-list-active: Applied to active filters
• is-list-asc: Applied to ascending sort triggers
• is-list-desc: Applied to descending sort triggers
• is-list-pagination-disabled: Applied to disabled pagination buttons

Customize these classes:

<div fs-list-element="list"
     fs-list-filteringclass="filtering"
     fs-list-loadingclass="loading"
     fs-list-sortingclass="sorting"
     fs-list-startingclass="starting"
     fs-list-activeclass="active">

Complete Example

Basic Setup

<div fs-list-element="wrapper">
  <!-- Search -->
  <input type="text" 
         fs-list-field="title" 
         fs-list-operator="contain"
         placeholder="Search...">
  
  <!-- Sort -->
  <button fs-list-element="sort-trigger" fs-list-field="title">
    Sort A-Z
  </button>
  
  <!-- List -->
  <div fs-list-element="list">
    <div fs-list-element="item">
      <h3 fs-list-field="title">Item Title</h3>
      <p fs-list-field="description">Description</p>
    </div>
  </div>
  
  <!-- Empty state -->
  <div fs-list-element="empty" style="display: none;">
    No results found.
  </div>
</div>

When using fs-list-fieldtype="number" or fs-list-fieldtype="date", ensure the field values are in the correct format (numbers without commas/currency symbols, dates in ISO format).

Browser Support

The fs-list attribute is compatible with all modern browsers and IE11+.