AttRibutes
List Filter
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Filter

Create advanced no-code filtering systems for Webflow CMS Collection Lists and static lists.

Watch a quick tutorial
Standard Tutorial
Dynamic Tutorial

List Filter • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

List

Add to Collection List element

fs-list-element
=
"
list
"

Filters

Add to Form element

fs-list-element
=
"
filters
"

Field Identifier

Add to Form filters and to Collection Item fields

fs-list-field
=
"
IDENTIFIER
"

Checkbox or Radio Value

Add to Checkboxes and Radio Buttons

fs-list-value
=
"
VALUE
"

Optional elements

Search Field

Add to Input element

fs-list-field
=
"
IDENTIFIER
"

Toggle Button

Add to Checkbox Input

fs-list-field
=
"
IDENTIFIER
"

Clear

Add to link elements or Button

fs-list-element
=
"
clear
"

Items Count

Add to Text Block or Span

fs-list-element
=
"
items-count
"

Results Count

Add to  Text Block or Span

fs-list-element
=
"
results-count
"

Tag

Add to Div Block

fs-list-element
=
"
tag
"

Tag Field

Nested inside Tag element
Add to Text Block or Span

fs-list-element
=
"
tag-field
"

Tag Value

Nested inside Tag element
Add to Text Block or Span

fs-list-element
=
"
tag-value
"

Tag Operator

Nested inside Tag element
Add to Text Block or Span

fs-list-element
=
"
tag-operator
"

Tag Operator Override

Add to filter input with "fs-list-element = tag-operator"

fs-list-element
=
"
tag-operator-VALUE
"

Tag Remove

Nested inside Tag element
Add to any element

fs-list-element
=
"
tag-remove
"

Scroll Anchor

Add to Div Block

fs-list-element
=
"
scroll-anchor
"

Initial State

Add to Div Block

fs-list-element
=
"
initial
"

Empty State

Native CMS Collection Empty State
Style as needded

fs-list-element
=
"
s
"

Facet Count

Add to Text Block or Span

fs-list-element
=
"
facet-count
"

Active Class

Add to any Form element

fs-list-active
=
"
CLASS_NAME
"

Filter All

Add to Radio Button

fs-list-value
=
"
"

Show Query

Add to Collection List element

fs-list-showquery
=
"
true
"

Optional settings

Clear Specific ilter

Add to Clear element

fs-list-field
=
"
IDENTIFIER
"

Highlight

Add to Form element

fs-list-highlight
=
"
true
"

Debounce

Add to List element to debounce all inputs
Add to any Form element topdebounce that specific input

fs-list-debounce
=
"
TIME_IN_MS
"

Start Checked: Checkbox

Use Webflow's native "Start checked" Checkbox setting

=
"
"

Start Checked: Radio

Add to any Radio Button

checked
=
"
checked
"

Custom Field Type

Any Form element to define numeric or date field types

fs-list-element
=
"
VALUE
"

Format Tag Numbers

Add to Tag element
Set to true - format will default to the user’s locale
For specific locale use BCP47 language tags

fs-list-formatdisplay
=
"
true
"

Allow Form submit

Add to List element

fs-list-allowsubmit
=
"
true
"

Fuzzy Search

Add to Input element
Threshold 0: Exact Match
Threshold 100: Maximum Flexibility

fs-list-fuzzy
=
"
THRESHOLD
"

Custom Event

Add to Form element

fs-list-filteron
=
"
VALUE
"

Empty Filters

Add to any Form element

fs-list-emptyfacet
=
"
VALUE
"

Filter Values Matching Logic

Add to any Form element

fs-list-fieldmatch
=
"
and
"

Condition Values Matching Logic

Add to any Form element

fs-list-filtermatch
=
"
and
"

Condition Matching Logic

Add to any Form element

fs-list-conditionsmatch
=
"
or
"

Condition Groups Matching Logic

Add to any Form element

fs-list-groupsmatch
=
"
or
"

Conditions Operator

Add to any Form element

fs-list-operator
=
"
VALUE
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Pick a setup method for the filtered list

Standard Filtered List

Allow users to Filter a List using preset Checkboxes, Radios Buttons, Dropdowns, Select and Input fields.

Dynamic Filtered List

Allow users to Filter a List by composing a custom filter UI, using conditional groups and matching logic.

3

Add these required attributes to the elements

List

Defines the CMS Collection List that will be filtered
fs-list-element
=
"
list
"

The List Filter Solution is designed to create filtered lists in Webflow using HTML attributes. A typical filtered list is made up of two main parts:

  • The List — a group of items that will be filtered. This is usually a CMS Collection List but can also be a static list of elements.
  • The Filters UI — a Form element that contains all the individual filters, such as checkboxes, radios, selects, or inputs.

On this first step, we define which element the List is.

Apply the fs-list-element="list" to the Collection List element of the list you want to filter.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to this type of element
Collection List
EXAMPLE

Select the List element in Webflow, copy the attribute name and value from this page, and paste them in the Custom Attributes section of the Settings tab.

IMPORTANT

Most of List Solutions are compatible with non-CMS Lists, which are composed of static elements, distinct from CMS and Collection Lists.

To apply these solutions, you should replicate the structure of a CMS Collection List and assign specific attributes to each element within it.

Learn how to create non-CMS compatible lists.

Filters

Defines the Webflow Form element that contains all Filter UI elements
fs-list-element
=
"
filters
"

The filters UI—i.e. the area that contains all the filters UI elements e.g., Checkboxes, Radio buttons, Text Inputs—must be placed inside of a Form element.

Add the fs-list-element="filters" to the unique Form element that will contain all the filters UI elements (Checkboxes, Radio Buttons, Text Input etc.).

Add this attribute:
Name
fs-list-element
Copy
Value
filters
Copy
Add it to this type of element
Form element (Not the Form Block)
NOTE

Each filter in the UI acts as a condition applied to the List. In this documentation, the terms “filters” and “conditions” are often used interchangeably:

  • “Filter” refers to the visual input element (e.g. a checkbox for “Brand A”).
  • “Condition” refers to the logic behind that input (e.g. “Brand equals A”).
NOTE

Multiple Forms and Multiple Lists

When a layout requires the filter UI to span multiple Forms, and the filtered List to appear more than once on the page, Attributes supports both scenarios.

If there is only one filtered List on the page, the fs-list-element="filters" attribute can be added to each Form that makes up the UI. Any number of Forms can be used. The filtered List itself can also be duplicated to display multiple instances on the same page.

If there are multiple filtered Lists on the page, the fs-list-instance attribute must be used with a matching IDENTIFIER on both the filters UI and the filtered Lists. This attribute can be placed on a shared parent of a Form and a List, or on a common parent of several Forms when needed.

Field Identifier

Defines the elements used to filter the List (Checkboxes, Radio, Text Input etc.)
fs-list-field
=
"
IDENTIFIER
"

Add this attribute to a filter in the filters Form as well as to an element inside a Collection Item that corresponds to the filter.

The IDENTIFIER value must be the same for both to function correctly. This value links the filter UI element to the corresponding field in the Webflow CMS Collection List, ensuring proper filtering.

If you are filtering your List using multiple criteria—e.g., brands and colors—then you'll use this attribute multiple times in the filters Form and the Collection Item, with different IDENTIFIER values.

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-field = "category"
Add it to those types of elements inside of the filters form
Radio
Checkbox
Select
Input
Elements allowed for the filtered content
Text Block
Heading
Paragraph
Text Link
IMPORTANT

Radio Buttons must have the same Group Name—in the Settings tab—in order to function together.

Checkboxes must share the same Name—in the Settings tab— to work together.

NOTE

The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Countries", "States", "Cities", etc.

NOTE

The element with the matching IDENTIFIER inside the Collection Item does not need to be visible. You can hide it using display:none. As long as it is inside the Collection Item and has the correct attribute and matching IDENTIFIER, the filter will work.

You may need to take advantage of this regularly, if you want to filter by more criteria than what is visually displayed in your content design.

EXAMPLE

Add the fs-list-field attribute with the IDENTIFIER country to a checkbox field in the filters Form. Then add the same attribute, with the same value, to the text element that is showing the country name in the Collection List Item.

Repeat this operation for each filter in your filters Form.

Only required when using Radio Buttons or Checkboxes

Checkbox or Radio Value

Defines dynamic or static values for Checkboxes and Radio Buttons
fs-list-value
=
"
VALUE
"

The fs-list-value attribute sets the value that will be used when a Checkbox or Radio Button is selected. It works with both dynamic elements (e.g. a Webflow CMS Collection) and static elements.

How to use it:

  • For dynamic values (CMS): bind the appropriate CMS field to the attribute's value.
  • For static values: use a plain text string, like marketing.
Add this attribute:
Name
fs-list-value
Copy
Value
VALUE
Copy
Example with CMS values (bound to field):
fs-list-value = "{{category}}"
Example with static content:
fs-list-value = "marketing"
Add it to these types of elements
Checkbox
Radio Button
IMPORTANT

When using this attribute on Radio Buttons and Checkboxes, you still need to use the fs-list-field="IDENTIFIER" attribute to connect them to the appropriate field in the Collection Item.

NOTE

This procedure differs from Attributes v1 (Legacy). In v1, the value of the Checkbox and Radio Button elements where picked from their Labels elements. But you may want to have different labels, or to write them differently, or use a localized version of them.

NOTE

In HTML, Checkbox or Radio groups are defined by giving all inputs the same name, and each a unique value. fs-list supports this native behavior.

However, in Webflow, the value attribute can’t be bound to CMS fields. That’s why fs-list-value exists: it's a workaround for setting dynamic values on Checkboxes and Radio elements.

4

Publish your project and check out the result on the live site.

* Attributes Solutions must be tested on the published site after each change. They do not run in Design, Edit, or Preview mode.

Check more elements and settings below
Optional

Add more

elements

Search Field

Use a Text Input element to filter the Collection List
fs-list-field
=
"
IDENTIFIER
"

Add the fs-list-field attribute to a Text Input field in the filter Form to enable text-based filtering of the List, providing the same UX as a classic search-engine.

Text Input field search allows filtering the List on multiple criteria (fields) by specifying multiple IDENTFIERS values separated by commas, e.g., fs-list-field = "title, description, category".

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example 1 - Search one field.
fs-list-field = "title"
Example 2 - Search multiple fields:
fs-list-field = "title, description, category"
Example 3 - Search all fields:
fs-list-field = "*"
Add it to this type of element
Input
EXAMPLE

For example, fs-list-field = "title, description, category" will filter items based on all three fields.

To search for all CMS fields, use * as the value. For example fs-list-field = "*"

Toggle Button

Use a Checkbox as a toggle button to turn a filter ON or OFF
fs-list-field
=
"
IDENTIFIER
"

To create a toggle that turns a filter on and off with one click, link a Checkbox element to a Webflow CMS Toggle field.

  1. In the filter Form, add the fs-list-field= "IDENTIFIER" attribute to the Checkbox Field element. This enables the toggle functionality.
  2. In the filtered list, insert a Code Embed element and add the fs-list-field="IDENTIFIER" attribute with the same IDENTIFIER as the Checkbox Field.
  3. Inside the Code Embed element, insert the CMS Toggle field as a dynamic field using the +Add field menu on the top right.
Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-field = "featured"
Elements allowed:
Add it to this type of element
Checkbox Input
WARNING

Add the attribute on the Checkbox Field element.

Don't add it to the Checkbox element, or the Checkbox Label element, like it's required for other attributes of the List Solution.

EXAMPLE

To link a CMS Toggle field to a Checkbox for filtering:‍

  1. ‍In the filters area of the design, select the Checkbox Field element and add the fs-list-field attribute with a chosen value, e.g., promotion.
  2. In the Collection Item of the filtered list, insert a Code Embed element and add the same fs-list-field= "promotion" attribute. The attribute value must match in both elements.
  3. Inside the Code Embed, click the +Add field menu and insert the CMS Toggle field you want to link to the Checkbox. Save and close.
  4. Optionally, hide the Code Embed element using display: none or style it to fit your design. Hiding it won’t affect filtering.

The toggle will work upon publishing.

Clear

Defines a button or link that resets all filters when clicked
fs-list-element
=
"
clear
"

Add the fs-list-element = "clear" attribute to a Button or Link element. When clicked, it will clear all active filters.

This element must be nested inside the fs-list-element= "filters" element.

Add this attribute:
Name
fs-list-element
Copy
Value
clear
Copy
Add it to these types of elements
Text Link
Link Block
Button
NOTE

The setup above clears all active filters in the filters UI. To clear individual filter categories, multiple Clear buttons can be used—each targeting a specific category.

Add the fs-list-field= "IDENTIFIER" attribute to the Clear element, using an IDENTIFIER value that matches the filter category to be cleared.

Items Count

Display the total number of published items in the Collection
fs-list-element
=
"
items-count
"

Add the fs-list-element = "items-count" attribute to a Text element to display the total number of published Items in the current Collection. This represents the number of items in the unfiltered Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
items-count
Copy
Add it to these types of elements
Text Block
Text Span
EXAMPLE

If there are 68 published Items, the Text element with this attribute will display “68” on the published site.

It's useful for displaying messages like “Showing 42 out of 68 results.”—Check the next Attribute for binding the first number to the number of current results in the filtered List.

Instead of using multiple Text elements, you can use one single Text element for the sentence, and turn the number placeholders into <span>, and set the attributes on the span elements. This should look like this:
<Showing <span>00</span> out of <span>00</span> results>. This way, you keep a clean and accessible HTML structure.

Results Count

Display the current number of Items in the Filtered List
fs-list-element
=
"
results-count
"

Add the fs-list-element = "results-count" attribute to a Text element to display the current number of results, i.e., how many Items are showing in the filtered Collection List.

At a given time, if the filtered List shows 42 results—or Items—the Text element will display “42” on publish. If a new filter is activated, and the number of results in the List changes, the Text element changes accordingly.

This is useful for showing messages like “Showing 42 out of 68 results.”

‍

Add this attribute:
Name
fs-list-element
Copy
Value
results-count
Copy
Add it to these types of elements
Text Block
Text Span

Tag

Defines a template element to act as an active filter tag
fs-list-element
=
"
tag
"

An active Filter Tag is a block that appears whenever a filter is activated, helping users keep track of active filters—especially useful when the Filters UI is too large or long to display fully.

By adding the fs-list-element = "tag" attribute to any div block, you create a template that will be duplicated and shown for each active filter.

Add this attribute:
Name
fs-list-element
Copy
Value
tag
Copy
Add it to this type of element
Div Block
* This component has more elements required to be able to work, check below.
WARNING

Here is the list of additional elements that are required for proper functionality of the Tag. They all have to be nested inside the Tag element. Continue reading to learn how to integrate them.

  • The Tag Field, showing the name of the active filter (e.g., Color)
  • The Tag Value, showing the current value of the field (e.g., Black)
  • The Tag Operator, showing the defined Operator for the filter (e.g., =)
  • The Tag Remove, added to an element that will serve as a Remove button, to deactivate the filter from its Tag (e.g., a Text element with ×, an SVG image of a cross)
back arrow

Tag Field

Text element showing the active filter name
fs-list-element
=
"
tag-field
"

Add the fs-list-element = "tag-field" attribute to a Text element that will display the filter's field name on Publish. I.e. the IDENTIFIER of the active filters.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-field
Copy
Add it to this type of element
Text Block
EXAMPLE

If the Tag must display Color = Black ×, use four text elements side by side in the Tag template, and add the fs-list-element = "tag-field" to the one that will show Color.

Tag Value

Text element showing the active filter field value
fs-list-element
=
"
tag-value
"

Add the fs-list-element = "tag-value" attribute to a Text element that will display the filter's field value on Publish.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-value
Copy
Add it to this type of element
Text Block
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-value" to the Text element that will show Black.

NEW

Tag Operator

A Text element showing the matching operator in use for this filter
fs-list-element
=
"
tag-operator
"

Add the fs-list-element = "tag-operator" to a Text element that will show the sign for the operator in use on the current filter.

The operators symbols displayed by default are mathematical symbols. The can be overriden by other symbols, or illustrations or text, using the next attribute.

Default symbols:

  • empty: ∅
  • not-empty: !∅
  • contain: ⊃
  • not-contain: ⊅
  • equal: =
  • not-equal: ≠
  • less: <
  • less-equal: ≤
  • greater: >
  • greater-equal: ≥
Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator
Copy
Add it to this type of element
Text Block
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-operator" to the Text element that will show =.

OPTIONAL

Tag Operator Override

Overrides tag operator symbol
fs-list-element
=
"
tag-operator-X
"

These attributes allow a series of elements inside a Tag template to appear only when a specific operator is used in a filter condition. This is useful for customizing how filter Tags display logic like =, ≠, ≤, etc., depending on the filter’s behavior.

Tag Operator Overrides are defined by placing elements inside the Tag template. These elements—such as Text, Images, or Div Blocks—are styled to represent specific operators.

Each element is assigned one of the attributes below, depending on the operator it should respond to. Only the element matching the active operator will be shown; all others remain hidden.

Equal
Not-equal
Contain
Not-contain
Greater
Greater-equal
Less
Less-equal
Empty
Not-empty

Add this attribute to the element representing the equal operator.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Add this attribute to the element representing the not-equal operator.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-contain
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-contain
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-greater
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-greater-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-less
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-less-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-empty
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-empty
Copy
Add it to the filter input element using
fs-list-element="tag-operator"
EXAMPLE

Elements used for tag template operators can be any element. A Text element, an Image or a Div Block with its content.

This way, you can use what you want as visualization for operators: unicode symbols like = or ≠, strings of text like equal or contain—which is useful if you want to have them in your own language, and allow Webflow Localize or anyother localization solution to automatically translate them—symbols as images or even emojis ⬆️.

Tag Remove

The element that removes the tag
fs-list-element
=
"
tag-remove
"

Add the fs-list-element = "tag-remove" attribute to any element that will become a remove or close button for the Tag. Clicking it will remove the Tag and deactivate the filter.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-remove
Copy
Add it to these types of elements
Div Block
Text Block
Link Block
Text Link
Image
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-operator" to the Text element that will show ×.

In this example, the element used is a Text element, but it could be any element. It's often designed as a close button or link, and frequently uses an image.

NOTE

If no element inside the Tag template has the fs-list-element = "tag-remove" attribute, the Tag element will not be removed. This attribute is completely optional.

NOTE

The Tag Remove element is, by definition, an HTML <button> element, as its interaction causes a change in the page content. For improved accessibility, a Webflow Custom Element can be used and defined as a <button> for the remove action. (Note: this refers to a Custom Element, not the Button element found in the Add panel.)

To ensure correct behavior, the element should be defined as a <button> in the Settings panel and include the close icon or symbol inside.

Mandatory: the attribute type="button" must be set to prevent the element from being interpreted as a Form submit button, which is the default behavior of HTML <button> elements.

Format Tag Numbers

Formats numbers and dates inside Tag elements based on locale
fs-list-formatdisplay
=
"
VALUE
"

This attribute allows numbers and dates displayed in filter Tags to be formatted according to a specific locale.

It helps present values in a way that’s familiar and readable for users based on language or region (e.g., using commas, decimals, or date formats appropriate to the selected locale).

Use true for user's locale
Define a specific locale

true

If fs-list-formatdisplay="true" is used, the format will default to the user’s locale. I.e., if a user visit the site from Spain, the numbers will be formatted thewaythey should for his country.

Add this attribute:
Name
fs-list-formatdisplay
Copy
Value
true
Copy
Add it to the filter input element using
fs-list-element="tag"
script icon
Script tag
?

A specific locale can be forced using BCP 47 language tags like fs-list-formatdisplay="en-US".

Add this attribute:
Name
fs-list-formatdisplay
Copy
Value
LANGUAGE_TAG
Copy
Add it to the filter input element using
fs-list-element="tag"
EXAMPLE

If a Tag shows a date like 2025-04-01, there's two ways it can be show using the French date format 01/04/2025.

  • if fs-list-formatdisplay="fr-FR" is applied, and the visitor of the website is in France.
  • if fs-list-formatdisplay="fr-FR" is applied. But the same format will be shown to everyone in the world.

Scroll Anchor

Defines an element where the page will scroll to when the List is filtered
fs-list-element
=
"
scroll-anchor
"

This feature scrolls the page to a specific position whenever the List is filtered. It helps keep filtered results in view, especially in layouts with long pages or multiple UI elements above the List.

To enable it, add fs-list-element="scroll-anchor" to a Div Block placed where the scroll should land.

This improves UX in filter interfaces with many items by ensuring the user always starts viewing content from the top of the List.

Add this attribute:
Name
fs-list-element
Copy
Value
scroll-anchor
Copy
Add it to this type of element
Div Block
IMPORTANT

The fs-list-element="scroll-anchor" attribute can be overridden, and scroll anchor behavior can be customized per action.

When fs-list-element="scroll-anchor" is present, the list will scroll to that anchor on any action — filtering, sorting, or paginating.

For more granular control, specific scroll anchors can be defined for each action:

  • fs-list-element="scroll-anchor-filter"
  • fs-list-element="scroll-anchor-sort"
  • fs-list-element="scroll-anchor-pagination"

When any of these are set, the list will scroll to the corresponding anchor only for that specific action.

Initial State

Defines an element that will be displayed initially, before any filter is activated
fs-list-element
=
"
initial
"

Add the fs-list-element="initial" attribute to a Div Block that contains the design for the Initial State. This element will appear on page load in place of the List content, and every time that the filters are reset.

It can be placed anywhere on the page and can include any content—text, design, or remain empty. When the site is published, the element will be moved inside the List.

This attribute is useful for creating a filtered List that behaves like a traditional web search engine. The user experience begins with a search field on an empty page, and results appear only after matching terms are entered.

Add this attribute:
Name
fs-list-element
Copy
Value
initial
Copy
Add it to this type of element
Div Block
NOTE

This is not an Empty State. It is an Initial State. Use this attribute if you want zero items to show initially in your list. Once the user interacts with the Filter UI, items will show based on the selected filters. If the user then resets all filter selections, the Initial State will show.

Empty State

Element shown when there is no item matching the filter
 fs-list-element
=
"
empty
"

When using a Webflow CMS Collection List for the filtered List, it's required to add the fs-list-element="empty" attribute to the Empty State element, for it to function properly.

Add this attribute:
Name
fs-list-element
Copy
Value
empty
Copy
Add it to this type of element
Empty State
EXAMPLE

Select the Collection List and enable the Empty State in the Settings tab. The Empty State element can then be designed with text, images, links, and other elements as needed. After editing, switch back to the default state of the Collection List.

Since the Empty State element appears when no results match the current filter configuration, it’s common to include a Clear button or link within it. This allows the user to reset the filters and start a new filtering process.

NEW

Facet Count

Display how many results each filter will show if activated
fs-list-element
=
"
facet-count
"

Add the fs-list-element = "facet-count" attribute to a Text element inside of a Radio Button Field element or a Checkbox Field element, that will display the expected amount of results for a Checkbox or Radio Button Filter if this filter is activated.

Add this attribute:
Name
fs-list-element
Copy
Value
facet-count
Copy
Add it to these types of elements
Paragraph
Text Block or Span
EXAMPLE

Add a Text element— a Text Block, a Paragraph—inside of a Radio Button Field or a Checkbox Field that you're using as a filter, or define a Span into the Radio Button Label element or the Checkbox Label element. Select it, and add the fs-list-element = "facet-count" attribute to it.

Range Slider

Create a custom range slider for filtering content

List Sort

Create buttons, select fields, or dropdowns to sort the content

List Load

Add loading functionalities, such as ‘Load More’ and pagination, to your content
Optional

Add more

settings

Active Class

Custom active class for Filter UI elements
fs-list-activeclass
=
"
CLASS_NAME
"

Add an active class to a Filter UI element when it is selected.

Add this attribute to form elements:

with fs-list-field = "IDENTIFIER". Checkboxes, radios, text input all select all work.

  • if it's a Text Input field, add it to the Text Input element itself — the element with fs-list-field="IDENTIFIER".
  • if it's a Radio or Checkbox element, add it to the Radio Button Field element or the Checkbox Field element — the parent of the element with fs-list-field="IDENTIFIER".

To style the Active Class:

  1. Manually add the chosen class to the element — Text Input or Radio Button Field or Checkbox Field — or add the default .is-list-active class
  2. Style the element
  3. Remove the class from the element
Add this attribute:
Name
fs-list-activeclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-activeclass = "is-active"
Default:
fs-list-activeclass = "is-list-active"
Add it to this type of element
Element with fs-list-field = "IDENTIFIER" for a Text Input
Radio Button Field or Checkbox Field element for Checkboxes and Radios
script icon
Script tag
?
NOTE

When adding this attribute to the Checkbox/Radio element fs-list-field = "IDENTIFIER", the class will be added to the parent of the Checkbox/Radio Field element.

When adding this attribute to a text input or select input, the class will be added directly to this element.

If this is attribute is not set, .is-list-active is the default active class for all Filter UI elements.

NOTE

Add to an element with fs-list-field = "IDENTIFIER" to use this class name for this specific field identifier.

Add to an element with fs-list-element = "list" to use this class name for all filter UI elements with fs-list-field = "IDENTIFIER".

Animate the List

Define CSS animations on the List when a filter is activated
fs-list-filteringclass
=
"
CLASS_NAME
"

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

  • During a filter action, the .is-list-filtering class is added to the Collection List Wrapper. It is removed once the filter completes.
  • fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
  • The class can be renamed using the attribute fs-list-filteringclass.
Add this attribute:
Name
fs-list-filteringclass
Copy
Value
CLASS_NAME
Copy
Default:
fs-list-filteringclass = "is-list-filtering"
Example:
fs-list-filteringclass = "my-filtering-class"
Add it to this type of element
Collection List Wrapper
script icon
Script tag
?
NOTE

Please refer to the List Sort and List Load documentation pages for animating the List when it's sorted or loaded.

Filter All Button

Defines a button to show ALL Items, with an active state
fs-list-value
=
"
"

This method allows a Radio group to include an “All” option that resets or disables filtering for that group.

In a filter interface using Radio Buttons, it's common to include an “All” option that shows all results (all Items in the List) by default, or resets a specific filters group.

This behavior can be achieved using native HTML along with the checked attribute and a shared fs-list-field identifier across the group.

  • Add a single Radio Button close to your Radio group. Edit the label to type "All".
  • Give it the same Group Name as the group it's supposed to clear, in the Settings tab
  • Make sure the Choice Value field is empty
  • Set the same fs-list-field attribute and value to this Radio Button than the ones set on the Radio Buttons of the group.
  • Also add the fs-list-value attribute, but leave the value empty.
  • Use the checked="checked" attribute on the “All” option to make it selected by default when the page loads.

Now the "All" button works, and its active state can be styled the same way as the Radio of the group.

Add this attribute:
Name
fs-list-value
Copy
Value
Copy
Example
fs-list-value = ""
Add it to these types of elements
Radio Button
IMPORTANT

When using this attribute on Radio Buttons and Checkboxes, you still need to use the fs-list-field="IDENTIFIER" attribute to connect them to the appropriate field in the Collection Item.

NOTE

This procedure differs from Attributes v1 (Legacy). In v1, the value of the Checkbox and Radio Button elements where picked from their Labels elements. But you may want to have different labels, or to write them differently, or use a localized version of them.

NOTE

In HTML, Checkbox or Radio groups are defined by giving all inputs the same name, and each a unique value. fs-list supports this native behavior.

However, in Webflow, the value attribute can’t be bound to CMS fields. That’s why fs-list-value exists: it's a workaround for setting dynamic values on Checkboxes and Radio elements.

Show Query

Add query params to the URL when a user applies filters
fs-list-showquery
=
"
true
"

When a user filters content, query params are added to the URL when the user applies any filter.

These query params create custom urls with filter configuration. When loading this custom url, the grid will filter with the information from the query params.

Add this attribute:
Name
fs-list-showquery
Copy
Value
true
Copy
Default:
fs-list-showquery = "false"
Add it to any element with
fs-list-element = "list"
script icon
Script tag
?

Clear Specific Filter

Define a clear button that resets specific filter categories
fs-list-field
=
"
IDENTIFIER
"

To clear individual filter categories, multiple Clear buttons can be used—each targeting a specific category.

Add the fs-list-field="IDENTIFIER" attribute to the Clear element, using an IDENTIFIER value that matches the filter category to be cleared.

EXAMPLE

To create a Clear button to clear the filters of the Color category, add the following attributes to it:

  • fs-list-element="clear"
  • fs-list-field="color"
Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-field = "category"
Add it to any element with
fs-list-element = "clear"

Highlight

Highlight the active search terms inside the CMS Collection Items
fs-list-highlight
=
"
true
"

Adds text highlight to filter keywords when they are active in the filter.

Apply to any Filter UI elements. Text Field, Checkbox, Select, anything.

Add this attribute:
Name
fs-list-highlight
Copy
Value
true
Copy
Default:
fs-list-highlight = "false"
Add it to any element with
fs-list-field = "IDENTIFIER"
script icon
Script tag
?
EXAMPLE

For example, if I search or filter "SEO" in the Filter UI, the Collection Items that match "SEO" will highlight the SEO text field.

By default, the class .is-list-highlight is used for styling the highlight.

Highlight Class

Change the class of the active search term highlight
fs-list-highlightclass
=
"
CLASS_NAME
"

Change the class that is used to style the highlight functionality.

Add this attribute:
Name
fs-list-highlightclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-highlightclass = "is-highlight"
Default:
fs-list-highlightclass = "fs-list-highlight"
Add it to any element with
fs-list-element = "list"
script icon
Script tag
?

Debounce

Wait some time until the filters are applied
fs-list-debounce
=
"
TIME_IN_MS
"

Set a period of time (in milliseconds) before the filter updates.

Useful for 'pausing' the filter from updating until the user is done typing.

Add this attribute:
Name
fs-list-debounce
Copy
Value
TIME_IN_MS
Copy
Example:
fs-list-debounce = "200"
To add debounce to a specific filter, add it to any element with
fs-list-field = "IDENTIFIER"
To add debounce to all filters, add it to any element with
fs-list-element = "list"
script icon
Script tag
?
EXAMPLE

Setting this option on a search text input can prevent filtered results from updating with each character entered. Setting a debounce value can show filtered results after the user has likely stopped typing.

Start Checked: Checkbox

Have one or more checkboxes selected on page load

No attribute needed.

This option can be achieved with the Webflow native "Start checked" checkbox in Checkbox Settings.

Add it to a Checkbox with
fs-list-field = "IDENTIFIER"
NOTE

Need to generate a custom url that loads the filter list based on the url?

Check out the "SHOW QUERY" option.

Start Checked: Radio

Radio Element that will be checked on page load (Recommended for "All" buttons)
checked
=
"
checked
"

Add checked = "checked" to the Radio input. This is a native HTML attribute that defines a checkbox or radio to start as checked on page load. Adding this attribute to the Radio input element will make that element pre-selected on load.

Add this attribute:
Name
checked
Copy
Value
checked
Copy
Add it to a Radio button with
fs-list-field = "IDENTIFIER"
EXAMPLE

If an “All” button is used to show all items in the Filters UI, it should appear selected by default on page load, as all items are visible initially.

NOTE

This attribute is a standard HTML attribute.

This setup can only be applied to one Radio element within a Radio Group. If multiple filters need to be selected at the same time, use Checkboxes instead.

Do not use this attribute on CMS generated Radio Buttons filters

Custom Field Type

Defines a custom type for a list field. I.e., number or date.
fs-list-fieldtype
=
"
VALUE
"

This attribute is used to tell the filtering system how to treat the data in a field when applying filters. It is required when using comparison operators like greater or less, which need to understand whether a field contains numbers, dates, or plain text.

By default, all fields are treated as text. If a field contains numeric or date-based content, the correct type must be set using this attribute to ensure proper comparisons.

Chose the VALUE for the field type you need. Remove the attribute entirely to return to a standard text field.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
VALUE
Copy
Default:
fs-list-highlight = "false"
Add it to any element with
fs-list-field= "VALUE"
Add it to these types of elements
Checkbox Field
Radio Button Field
Select
number
date

number

Treats the field as a numeric value, allowing filters to compare values using operators like greater, less, etc.

Example: A field with 1999 will be evaluated as the number 1999.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
number
Copy
Add it to the filter input element using
fs-list-field

date

Treats the field as a date value in YYYY-MM-DD format, enabling date-based comparisons.

Example: A field with 2024-05-01 will be evaluated as a date.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
date
Copy
Add it to the filter input element using
fs-list-field
EXAMPLE

To compare a “Year” field using a greater-than filter, the element displaying the year must include fs-list-field="year" and fs-list-fieldtype="number". This allows the filter to correctly interpret the year as a number rather than a text string.

IMPORTANT

If the field type is not set correctly, filters using comparison operators may not behave as expected. Always define the field type when using numerical or date-based logic.

Allow Form Submit

Allow users to submit the filter form
fs-list-allowsubmit
=
"
true
"

When using a filter inside a form, allow the user to submit the form.

By default, form submissions are disabled in Attributes CMS Filter. Set this attribute to true to enable form submissions in your Filter UI.

It is required to have a form submit button inside the form.

Useful for filtering through a long list of radio or checkbox options inside a form, which the user should submit.

Add this attribute:
Name
fs-list-allowsubmit
Copy
Value
true
Copy
Default:
fs-list-allowsubmit = "false"
Add it to any element with
fs-list-element = "list"
script icon
Script tag
?
NEW

Fuzzy Search

Allows a forgiving matching on entered search terms
fs-list-fuzzy
=
"
THRESHOLD
"

Fuzzy search returns results that closely match a term, even if there are typos, misspellings, or partial matches. It’s useful for handling imperfect input or user error.

To enable Fuzzy search on the Search field—the Text Input element with fs-list-field="IDENTIFIER"—two attributes must be added:

1. fs-list-operator="equal" defines a strict matching logic required for Fuzzy search to function correctly.

2. fs-list-fuzzy="THRESHOLD" sets the tolerance level for Fuzzy matching. The THRESHOLD value ranges from 0 to 100, where 0 allows only exact matches and 100 allows maximum flexibility. A value of 20 is a recommended starting point and can be adjusted as needed.

Add this attribute:
Name
fs-list-fuzzy
Copy
Value
THRESHOLD
Copy
Add it to any element with
fs-list-field="IDENTIFIER"
Add it to these types of elements
Input
script icon
Script tag
?
EXAMPLE

Filter input: "electrik"
Field value: "electric" → ✅ Match with Fuzzy enabled
Field value: "hybrid" → ❌ No match

NEW

Custom Event

Changes the event type that triggers filtering
fs-list-filteron
=
"
VALUE
"

This attribute controls when filters are applied, depending on how users interact with the filter Form. By default, filtering happens immediately as users interact with inputs, but this can be adjusted to wait for specific events.

change
submit

‍change

Triggers the filter when a field value changes and loses focus. Useful for dropdowns, checkboxes, or similar inputs where filtering should occur after a clear change.

Add this attribute:
Name
fs-list-filteron
Copy
Value
change
Copy
Default:
fs-list-filteron = "input"
Add it to the Form element with
fs-list-element="filters"
script icon
Script tag
?

submit

Triggers the filter only when the form is submitted. Use this to allow users to select multiple filters before applying them all at once.

Add this attribute:
Name
fs-list-filteron
Copy
Value
submit
Copy
Default:
fs-list-filteron = "input"
Add it to the Form element with
fs-list-element="filters"
EXAMPLE

To allow users to select multiple filters and apply them by clicking a submit button, set the Form’s fs-list-filteron value to submit. This prevents filters from applying instantly and instead waits for the user to confirm their selections.

This can be useful to prevent too many filtering passes from happening in a short period of time, avoiding layout flickering and offering a more controlled user experience.

NOTE

The default behavior for filters Forms is input. If this is the desired one, there's no need to add this attribute.

input (default)

Triggers the filter as the user types or interacts with a field. Best suited for text inputs or real-time filtering.

To revert to this behavior after having changed it to change or submit, simply delete this attribute.

NOTE

fs-list-filteron="submit" doesn't require fs-list-allowsubmit="true". They're different attributes, they serve a different purpose.

  • fs-list-allowsubmit is only needed if you want to submit the Form to Webflow as usual (Form is submitted -> thank you message appears → data is collected by Webflow)
  • fs-list-filteron="submit" triggers the filters on submit, independent of wether the data is sent to Webflow or not
NEW

Empty Filters

Hide or style filters with no expected results
fs-list-emptyfacet
=
"
VALUE
"
Values allowed
Hide
Style differently: Add-class

Use this value if you want to hide filters with no forecasted results.

Add fs-list-emptyfacet="hide" to hide the element it's on—except for Select fields where it hides Options.

  • For Checkboxes and Radio Buttons, the fs-list-emptyfacet can be added to:
    • The checkbox/radio itself.
    • Any parent of the checkbox/radio: this will hide this element when the filter it contains has zero forecasted results.
  • For Select elements: the attribute must be added to the Select element, and it will hide any option that have no result predictions.
Add this attribute:
Name
fs-list-emptyfacet
Copy
Value
hide
Copy
Add it to these types of elements
Checkbox Field
Radio Button Field
Select

Use this value if you want to give a different style to filters with no forecasted results, instead of hiding them. For example, a grayed-out style can be used to indicate that the filter would produce no results.

Add fs-list-emptyfacet="add-class" to activate the default class .is-list-emptyfacet on the filter when there are no potential matching results.

Add styles to the .is-list-emptyfacet class to customize the empty state of the filter.

  • For Checkboxes and Radio Buttons, the fs-list-emptyfacet can be added to:
    • The Checkbox Field or Radio Button Field element itself
    • Any parent of the Checkbox or Radio Button elements.
  • For Select elements: the attribute must be added to the Select element, and it will hide any option that have no result predictions.
Add this attribute:
Name
fs-list-emptyfacet
Copy
Value
add-class
Copy
Add it to these types of elements
Checkbox Field
Radio Button Field
Select
EXAMPLE

To style Checkbox elements differently when they have no forecasted results (facet-count=0), such as creating a grayed-out version, select the Checkbox field and manually add the class .is-list-emptyfacet.

Then apply the desired styles (e.g., adjust opacity, apply a CSS filter). Once styling is complete, the class can be removed.

On the published site, the class will be added dynamically to any Checkbox in that group with no results.

NOTE

You can override the default .is-list-empty class by using the fs-list-emptyclass attribute with a custom class.

Add fs-list-emptyclass="VALUE"—where VALUE is your custom class name—to apply that class to the filter when there are no potential matching results.

Add this attribute:
Name
fs-list-emptyclass
Copy
Value
add-class
Copy
Add it to an element with
fs-list-emptyfacet="add-class"
WARNING

Placing the attribute on a parent element doesn’t mean it should wrap multiple filters. If multiple filters are inside, the styling or hiding would apply to all of them when just one has no results.

Instead, the attribute should be placed on the specific element that should receive the .is-list-emptyfacet class. This allows full control over which part of the UI reacts when a filter has no matching results.

  • For Checkboxes: apply it to the Checkbox element, Checkbox Field element, a wrapping Div, or the Collection Item (for dynamic filters).
  • For Radio Buttons: apply it to the Radio Button element, Radio Button Field element, a parent wrapper, or the Collection Item.

This setup ensures empty styling or hiding is applied exactly where intended.

NEW

Fields Values Matching Logic

Changes the matching logic for multiple values fields to "and"
fs-list-fieldmatch
=
"
and
"

The fs-list-fieldmatch is used on CMS fields containing multiple values (e.g., a Multi-Reference field or a Text field). This attribute defines how those values are matched during filtering.

By default, the logic is or, meaning the filter will match if at least one of the field’s values satisfies the condition. This attribute is not required if that is the desired matching logic.

To match only Items where all values meet the condition, add this attribute with the value and to define the new matching logic.

Add this attribute:
Name
fs-list-fieldmatch
Copy
Value
and
Copy
Default:
fs-list-fieldmatch = "or"
Add it to any element inside of the filters Form with
fs-list-field
script icon
Script tag
?
EXAMPLE

In the filters UI, there's a Text Input field, linked with fs-list-field="fuel" to a field in the Collection Item of the filtered List, with the same fuel IDENTIFIER. In the filtered List's Collection Item, there's a Multi-Reference field, mapped to a Checkbox group, with the values: ["Hybrid", "Electric"].

  • By default —with the default logic fs-list-fieldmatch="or" — Items of the Collection List will match if the value entered in the Text Input filter matches at least one value of the field. I.e., if ["Hybrid"] is typed in the Text Input filter, all Items with either ["Hybrid"], ["Electric"] , but also ["Hybrid"] and ["Electric"], will match the filter.
  • By adding fs-list-fieldmatch="and" to the Text Input field in the filters UI, the matching logic changes: Items will match if the value entered in the Text Input filter matches exactly the value of the field. I.e., if ["Hybrid"] is typed in the Text Input filter, only items with ["Hybrid"] will match the filter. Items that show both ["Hybrid"] and ["Electric"] won't match the filter i.e., won't be shown in the filtered List.
NOTE

To revert to the "or" matching logic, delete this attribute, or change the and value to or.

NEW

Conditions Values Matching logic

Changes the matching logic for a filter with multiple values
fs-list-filtermatch
=
"
VALUE
"

The fs-list-filtermatch is used on a Condition (filter) containing multiple values (e.g., a Checkbox group). This attribute defines how those values are matched during filtering.

By default, the logic is or, meaning the filter will match if at least one of the field’s values satisfies the condition. This attribute is not required if that is the desired matching logic.

To return only items that match all selected values, use the value "and", add this attribute with the value and to define the new matching logic.

Add this attribute:
Name
fs-list-filtermatch
Copy
Value
and
Copy
Default:
fs-list-filtermatch = "or"
Add it to any element with
fs-list-field
script icon
Script tag
?
EXAMPLE

A user selects "Hybrid" and "Gasoline" from a Checkbox group.

  • By default, with fs-list-filtermatch="or": Collection Items of the filtered List containing either value will be shown.
  • With fs-list-filtermatch="and": only Items that have both values will be shown.
NOTE

To revert to the "or" matching logic, delete this attribute, or change the and value to or.

NEW

Conditions Matching Logic

Changes the matching logic between filters of a Form to "and"
fs-list-conditionsmatch
=
"
or
"

The fs-list-conditionsmatch="or" attributes is used to set how multiple filters inside of a single group (Form element) are matched.

The default logic is "and", meaning an Item must match all Conditions (filters) to be shown. This attribute is not required if that is the desired matching logic.

To return Items that match any Condition (filter) in the group, add this attribute and set the value to "or".

Add this attribute:
Name
fs-list-conditionsmatch
Copy
Value
or
Copy
Default:
fs-list-conditionsmatch = "and"
Add it to the Form element with
fs-list-element="filters"
EXAMPLE

A Form includes filters for ["Type contains SUV"], ["Year ≥ 2018"], and ["Fuel = Electric"].

  • By default, with fs-list-conditionsmatch="and": Items must meet all filters. So only Items with "SUV", "≥ 2018" and "Electric" will match the filters.
  • With fs-list-conditionsmatch="or": Items can meet any one of the filters. So Items with only "Type:SUV" but a different year and fuel will match the filters.
NOTE

To revert to the "and" matching logic, delete this attribute, or change the or value to and.

NEW

Condition Groups Matching Logic

Changes the matching logic between groups of filters to "or"
fs-list-groupsmatch
=
"
or
"

The fs-list-groupsmatch="or" attributes is used to set how multiple filter groups (i.e., multiple forms) are matched.

The default logic is "and", meaning an Item must match all Conditions (filters) of all groups (Forms) to be shown. This attribute is not required if that is the desired matching logic.

To return Items that match all Conditions (filters) of any group (Forms), add this attribute and set the value to "or".

Add this attribute:
Name
fs-list-groupsmatch
Copy
Value
or
Copy
Default:
fs-list-groupsmatch="and"
Add it to the Form element with
fs-list-element="filters"
script icon
Script tag
?
EXAMPLE

There are two forms: one filters by Brand, the other by Year.

  • With the default fs-list-groupmatch="and": Items must match filters from both groups (Forms) to show-up in the filtered List.
  • With fs-list-groupmatch="or": Items matching filters from either group (Form) will be shown.
NOTE

To revert to the "and" matching logic, delete this attribute, or change the or value to and.

NEW

Conditions Operator

Changes the filter condition operator.
fs-list-operator
=
"
VALUE
"

The fs-list-operator attribute is used to define how the filter value is compared to the CMS data. This is useful when applying conditions such as greater than, less than, contains, etc.

The default value for this attribute is contain. Contain just checks if the field value includes the filter value. If this is the intended behavior, no attribute is needed.

Add the attribute and chose one of the following values to apply a different matching strategy than contain.

not-contain
equal
not-equal
exist
not-exist
less
less-equal
greater
greater-equal

‍not-contain

  • Checks if the field value does not include the filter value.
  • ‍Example
    Filter input: "SUV"
    Field value: "Compact SUV" → ❌ No match
    Field value: "Electric Car" → ✅ Match
Add this attribute:
Name
fs-list-operator
Copy
Value
not-contain
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field
script icon
Script tag
?

‍equal

  • Checks if the field value is exactly the same as the filter value. No partial matches are allowed.
  • ‍Example
    Filter input: "Electric"
    Field value: "Electric" → ✅ Match
    Field value: "Electric SUV" → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
equal
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

not-equal

  • Checks if the field value is not exactly the same as the filter value.
  • ‍Example
    Filter input: "Electric"
    Field value: "Hybrid" → ✅ Match
    Field value: "Electric" → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
not-equal
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

‍exist

  • Checks if the field has any value at all. Useful for optional fields.
  • ‍Example
    Field value: "Hybrid" → ✅ Match
    Field is empty → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
exist
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

not-exist

  • Checks if the field is empty.
  • ‍Example
    Field value: "" (empty) → ✅ Match
    Field value: "Gasoline" → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
not-exist
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

less

  • Checks if the field value is less than the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2020
    Field value: 2018 → ✅ Match
    Field value: 2022 → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
less
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

less-equal

  • Checks if the field value is less than or equal to the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2020
    Field value: 2020 → ✅ Match
    Field value: 2021 → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
less-equal
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

greater

  • Checks if the field value is greater than the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2015
    Field value: 2020 → ✅ Match
    Field value: 2010 → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
greater
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field

‍greater-equal

  • Checks if the field value is greater than or equal to the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2015
    Field value: 2015 → ✅ Match
    Field value: 2010 → ❌ No match
Add this attribute:
Name
fs-list-operator
Copy
Value
greater-equal
Copy
Default:
fs-list-operator="contain"
Add it to the filter input element using
fs-list-field
EXAMPLE

An input with fs-list-field="year" and fs-list-operator="greater-equal"

  • Filters Items where the CMS year field is greater than or equal to the entered value.
3

Add these required attributes to the elements

BEFORE YOU START

Understand how to build the Dynamic Filter UI template

The Dynamic Filtered List method works from a template rather than a fixed UI. The designer sets up a Form structure with a Condition Group, a Condition, and controls to add, remove, and configure matching logic. Visitors then use this template to build their own custom filter interface directly on the site.

The Dynamic Filters UI in consecutive steps: at page load, after the first condition has been set and another condition added, after a condition group was added with two conditions inside it, and the matching logic for that groups set to or.

‍

The documentation explains which attributes are needed and where they belong. Before using them, the base template must be in place—a structure of nested Divs, Form elements, buttons, and Selects that defines the filter layout and logic. Once built, it can be styled freely.

Setting up the filters UI template

  1. Copy the cloneable project linked at the top of the page. It includes the full template with all attributes already set. It can be simply copied into a Webflow project along with the List to filter.
  2. Set the content of the Select elements with the condition-field, condition-operator and condition-value attributes by following the documentation.
  3. Style the template. Wrappers or other elements can be introduced for styling, as long as the core hierarchy of the template is respected.
IMPORTANT

Even when using the Cloneable Template option, it is important to read through the documentation.

Understanding how the template is structured, and particularly how to configure the content of the Select elements — especially the Condition Operator Select Field — is essential for designing the best possible filtering UX.

NOTE

Manual setup: the filters UI template can be recreated manually in Webflow instead of using the cloneable.

A structure diagram below outlines the required hierarchy for elements. This layout must be followed precisely for the filter system to work. Once the structure is in place, attributes are added manually to each element as detailed in the diagram.

This diagram shows how the filters UI template from the cloneable project is built. There's a Client First naming of the elements, and extra wrappers allowing to place the matching operators on the side of the elements they control.

Form Block .dynamic_form-block 
└── Form .dynamic_form fs-list-element="filters"
    └── Div Block .dynamic_wrapper
        ├── Select Field .condition_select fs-list-element="condition-group-match"
        └── Div Block .condition_column
            ├── Div Block .condition_group fs-list-element="condition-group"
            │   └── Div Block .condition_item fs-list-element="condition"
            │       ├── Select Field .condition_select fs-list-element="condition-match"
            │       └── Div Block .condition_column
            │           └── Div Block .condition_row
            │               ├── Select Field .condition_select fs-list-element="condition-field"
            │               ├── Select Field .condition_select fs-list-element="condition-operator"
            │               ├── Text Field/Select Field .condition_field fs-list-element="condition-value"
            │               └── Image .condition_remove fs-list-element="condition-remove"
            ├── Div Block .condition_controls
            │   ├── Link .condition_link fs-list-element="condition-add"
            │   └── Link Block .condition_group-link
            │       ├── Image .condition_group-remove-icon fs-list-element="condition-group-remove"
            │       └── Text Block
            └── Link .condition_link fs-list-element="condition-group-add"

‍

This diagram shows the minimum requirements for the filters UI template structure.

Form Block
└── Form fs-list-element="filters"
    ├── Select Field fs-list-element="condition-group-match"
    ├── Div Block fs-list-element="condition-group"
    │   └── Div Block fs-list-element="condition"
    │       ├── Select Field fs-list-element="condition-match"
    │       └── Div Block
    │           ├── Select Field fs-list-element="condition-field"
    │           ├── Select Field fs-list-element="condition-operator"
    │           ├── Text Field/Select Field fs-list-element="condition-value"
    │           └── Image fs-list-element="condition-remove"
    ├── Div Block
    │   ├── Link fs-list-element="condition-add"
    │   └── Link Block
    │       ├── Image fs-list-element="condition-group-remove"
    │       └── Text Block
    └── Link fs-list-element="condition-group-add"

‍

List

Defines the CMS Collection List that will be filtered
fs-list-element
=
"
list
"

The List Filter Solution is designed to create filtered lists in Webflow using HTML attributes. A typical filtered list is made up of two main parts:

  • The List — a group of items that will be filtered. This is usually a CMS Collection List but can also be a static list of elements.
  • The Filters UI — a Form element that shows all the individual filters, such as checkboxes, radios, selects, or inputs. On the Dynamic Filtered List setup, the Filters UI is a template—a structure of elements, with attributes affected to each—that you must either reproduce or copy from the cloneable project.

On this first step, we define which element the List is.

Apply the fs-lis-element="list" to the Collection List element of the list you want to filter.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to this type of element
Collection List
EXAMPLE

Select the List element in Webflow, copy the attribute name and value from this page, and paste them in the Custom Attributes section of the Settings tab.

Field Identifier

Defines the elements used to filter the List
fs-list-field
=
"
IDENTIFIER
"

Add this attribute to an element inside a Collection Item that's linked to a CMS field, e.g., a date, a name.

The IDENTIFIER value must match the one defined in the Value field of the Select Choice for the Condition Selector element (see the Field Selector documentation below).

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-field = "category"
Elements allowed for the filtered content
Text Block
Heading
Paragraph
Text Link
IMPORTANT

This is how the matching between the CMS Collection and the Filter UI is made: this attribute is placed on an element linked to the CMS Collection, and is linked to a Choice (option) in the Selector field, by its IDENTIFIER value that's the same as the Choice (option) value for that field.

NOTE

Elements tagged with this attribute don't need to be visible. You can hide t using display:none. As long as they are inside the Collection Item and have the correct attribute, t.

You may need to take advantage of this regularly, if you want to filter by more criteria than what is visually displayed in your content design.

Only required when using Number or Date fields

Custom Field Type

Defines a custom type for a list field, such as a number or a date
fs-list-fieldtype
=
"
VALUE
"
Number
Date

number

Treats the field as a numeric value, allowing filters to compare values using operators like greater, less, etc.

Example: A field with 1999 will be evaluated as the number 1999.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
number
Copy
Add it to the filter input element using
fs-list-field

date

Treats the field as a date value in YYYY-MM-DD format, enabling date-based comparisons.

Example: A field with 2024-05-01 will be evaluated as a date.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
date
Copy
Add it to the filter input element using
fs-list-field
EXAMPLE

To compare a “Year” field using a greater-than filter, the element displaying the year must include fs-list-field="year" and fs-list-fieldtype="number". This allows the filter to correctly interpret the year as a number rather than a text string.

IMPORTANT

If the field type is not set correctly, filters using comparison operators may not behave as expected. Always define the field type when using numerical or date-based logic.

Filters

Defines the Webflow Form element that contains the Dynamic Filters template
fs-list-element
=
"
filters
"

The Dynamic filter template root is a Form element.

Add the fs-list-element="filters" to the unique Form element that will contain all elements of the template.

Add this attribute:
Name
fs-list-element
Copy
Value
filters
Copy
Add it to this type of element
Form
IMPORTANT

The Dynamic Filtered List w, the Filters UI is a template—a structure of elements, with attributes affected to each—that you must either reproduce or copy from the cloneable project.

NOTE

Each filter in the UI acts as a condition applied to the List. In this documentation, the terms “filters” and “conditions” are often used interchangeably:

  • “Filter” refers to the visual input element (e.g. a checkbox for “Brand A”).
  • “Condition” refers to the logic behind that input (e.g. “Brand equals A”).
back arrow

Condition Group

Defines a wrapper for a group of conditions
fs-list-element
=
"
condition-group
"

The fs-list-element="condition-group" attribute is placed on the element that holds one group of conditions. Each group can contain multiple individual conditions and logic can be applied between them. When multiple groups are present, the logic between them is controlled separately.

Add this attribute:
Name
fs-list-element
Copy
Value
condition-group
Copy
Add it to this type of element
Div Block
EXAMPLE

A Div Block with this attribute wraps several individual condition items. It represents a complete condition group and includes a group match selector above it and group add/remove controls inside.

back arrow

Condition

Defines a single filter condition within a group
fs-list-element
=
"
condition
"

The fs-list-element="condition" attribute identifies the condition block template. The block includes a field selector, operator selector, input value, and a remove button.

Add this attribute:
Name
fs-list-element
Copy
Value
condition
Copy
Add it to this type of element
Div Block
EXAMPLE

A Div Block with the fs-list-element="condition" attribute contains one row of a filter logic: field dropdown, operator dropdown, value input, and a remove icon.

back arrow

Field Selector

The element where the field (e.g. name, year) is selected
fs-list-element
=
"
condition-field
"

The fs-list-element="condition-field" attribute is used on a Select element containing a list of CMS fields as Select Choices—which are HTML <options> elements. Choices include:

  • A Text field, representing the text label that is shown in the dropdown menu of the Select element. e.g., "Brand"
  • A Value field, representing the IDENTIFIER that has to match with the one defined previously on elements inside of the Collection Item with the fs-list-field attribute.

The IDENTIFIER is what establishes a connection between the filter field and the CMS Collection, via the CMS elements in the Collection Item.

Add a list of fields to a Select field

  1. Select the Select element
  2. Go to the Settings tab and add as many Choices you want to have operators listed. Write the label that will be shown in the Dropdown in the Text field, and the IDENTIFIER in the Value field.
Add this attribute:
Name
fs-list-element
Copy
Value
condition-field
Copy
Add it to this type of element
Select
EXAMPLE

A select element with the fs-list-element="condition-field" attribute includes options like “name”, “year”, and “fuel”. When one is selected, the corresponding field will be used for that condition.

Operator Selector

The element where the operator (e.g. greater than) is selected
fs-list-element
=
"
condition-operator
"

The fs-list-element="condition-operator" attribute is used on a Select element containing a list of operators as Select Choices—which are HTML <options> elements. Choices include:

  • A Text field, representing the text label that is shown in the dropdown menu of the Select element.
  • A Value field, representing the operator name e.g., equal — optionally followed by modifiers such as [field=...] or [fieldmatch=...]

The filtering logic evaluates the selected operator in combination with the active field and any applicable modifiers, to produce the expected result in the filter UI.

Add a list of operators to a Select field

  1. select the Select element
  2. go to the Settings tab and add as many Choices you want to have operators listed. Write the label that will be shown in the Dropdown in the Text field, and the operator name in the Value field

Declared this way, all operators (choices) will be shown for all filters.

Available operators

Add this attribute:
Name
fs-list-element
Copy
Value
condition-operator
Copy
Add it to this type of element
Select
contain
not-contain
equal
not-equal
exist
not-exist
less
less-equal
greater
greater-equal

‍contain

  • Checks if the field value includes the filter value.
  • ‍Example
    Filter input: "SUV"
    Field value: "Compact SUV" → ✅ No match
    Field value: "Electric Car" → ❌ No match
Add this Value to the Select Choice
Value
contain
Copy

‍not-contain

  • Checks if the field value does not include the filter value.
  • ‍Example
    Filter input: "SUV"
    Field value: "Compact SUV" → ❌ No match
    Field value: "Electric Car" → ✅ Match
Add this Value to the Select Choice
Value
not-contain
Copy

‍equal

  • Checks if the field value is exactly the same as the filter value. No partial matches are allowed.
  • ‍Example
    Filter input: "Electric"
    Field value: "Electric" → ✅ Match
    Field value: "Electric SUV" → ❌ No match
Add this Value to the Select Choice
Value
equal
Copy

‍not-equal

  • Checks if the field value is not exactly the same as the filter value.
  • ‍Example
    Filter input: "Electric"
    Field value: "Hybrid" → ✅ Match
    Field value: "Electric" → ❌ No match
Add this Value to the Select Choice
Value
not-equal
Copy

‍exist

  • Checks if the field has any value at all. Useful for optional fields.
  • ‍Example
    Field value: "Hybrid" → ✅ Match
    Field is empty → ❌ No match
Add this Value to the Select Choice
Value
exist
Copy

not-exist

  • Checks if the field is empty.
  • ‍Example
    Field value: "" (empty) → ✅ Match
    Field value: "Gasoline" → ❌ No match
Add this Value to the Select Choice
Value
not-exist
Copy

less

  • Checks if the field value is less than the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2020
    Field value: 2018 → ✅ Match
    Field value: 2022 → ❌ No match
Add this Value to the Select Choice
Value
less
Copy

less-equal

  • Checks if the field value is less than or equal to the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2020
    Field value: 2020 → ✅ Match
    Field value: 2021 → ❌ No match
Add this Value to the Select Choice
Value
less-equal
Copy

greater

  • Checks if the field value is greater than the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2015
    Field value: 2020 → ✅ Match
    Field value: 2010 → ❌ No match
Add this Value to the Select Choice
Value
greater
Copy

‍greater-equal

  • Checks if the field value is greater than or equal to the filter value. Only works with number or date fields.
  • ‍Example
    Filter input: 2015
    Field value: 2015 → ✅ Match
    Field value: 2010 → ❌ No match
Add this Value to the Select Choice
Value
greater-equal
Copy
IMPORTANT

Field matching for multi-value fields

For fields with multiple values (like multi-reference fields), use the fieldmatch modifier to define how values are evaluated:

  • fieldmatch=or → At least one value must match
  • fieldmatch=and → All values must match

The format is: operator[field=fieldName][fieldmatch=and]‍

NOTE

Why do you need different labels for the same operator?

The same operator can represent different ideas depending on the field it’s applied to. For example, the greater operator compares values, but its meaning varies: for a Numeric field like year, it’s better to display “is greater than”, while for a Date field like updated, “is after” better communicates the intent.

Why do you need operators only on certain fields?

Not all operators are meaningful or valid for every field.

For example, the contains operator makes sense on a Text field like name or brand, but not on a Number or Date field. Similarly, greater and less operators apply to numeric or date-based fields, but not to multi-reference categories.

Limiting operators to relevant fields and customizing their labels prevent confusion and makes the filter logic logical and user-friendly.

Condition Value

The input field for the user to enter the value for the filter
fs-list-element
=
"
condition-value
"

The fs-list-element="condition-value" attribute is used on inputs that hold the comparison value. Multiple inputs can coexist and will be dynamically shown or hidden based on the selected field and operator.

The filters UI template only contains a Text Input. So, in this configuration, all the added conditions, whatever their field or operator is, will use a Text Input.

But if you declare more Input elements, the Dynamic system will chose the appropriate one to use for each conditions, depending on its field and operator. So it will use a date input for date fields, a Select to list items of a CMS field etc.

4 types of inputs can be declared, and they must each be tagged with fs-list-element="condition-value"

  • A standard Input element, with its default Type=Plain in the Text Field settings
  • The same Input but set to Type=Number instead of Plain
  • A Select field
  • A Webflow Custom Element, set to Input, with a custom attribute type="date"
Add this attribute:
Name
fs-list-element
Copy
Value
condition-value
Copy
Add it to this type of element
Select
Input
NOTE

The extra inputs can be placed inside of the filters UI template, but it's not very easy to handle several elements there and achieve a meaningful design. So instead, we recommend that you place them anywhere on the page, inside of a Form, and you can wrap that form in a Div that you can hide.

EXAMPLE

A text input is shown when the selected field is “name”, while a number input appears when the field is “year”. Both inputs carry the fs-list-element="condition-value" attribute and are shown conditionally.

EXAMPLE

Core Logic

The system determines the most appropriate input to display for a condition value using three criteria:
1. Field type — either text, number, or date
2. Value structure — either single (only one value per item) or multiple (e.g., multi-select fields)
3. Operator — such as equal, contain, greater, etc.

Depending on this combination, the script prioritizes a specific input type. If that input isn’t present in the DOM, it falls back to the next most appropriate type.

Input Type Preferences (Fallback Logic)

Below is how inputs are prioritized per field type and condition:

Text field — single value
  • For equal and not-equal:
    • Look for a Select input
    • Fallback to Text input
  • For contain, not-contain, start, end, etc.:
    • Only Text input is used
Text field — multiple values
  • For equal, not-equal:
    • Look for Select Multiple
    • Then Select One
    • Then Text input
  • For all other operators:
    • Only Text input is used
Number field — single value
  • For all comparison operators (equal, less, greater, etc.):
    • Look for Number input
    • Fallback to Text input
Date field — single value
  • For all comparison operators (equal, before, after, etc.):
    • Look for a Date input
    • Fallback to Text input

Remove Condition

The element that removes the current condition
fs-list-element
=
"
condition-remove
"

The fs-list-element="condition-remove" is added to any element that the user can click on to remove the entire condition it belongs to. Basically, it remove its parent container.

Add this attribute:
Name
fs-list-element
Copy
Value
condition-remove
Copy
Add it to these types of elements
Image
Link
Link Block
<button> Custom Element
EXAMPLE

An image icon with an “X” is placed at the end of a condition row. It has the fs-list-element="condition-remove" and removes the corresponding condition when triggered.

NOTE

In the filtersUI template we propose we chose to use a simple image for this element. However, the right thing to do is to use a <button> made out of a Custom Element. It's the right thing to do because this element is making an action on the page when clicked. In terms of accessibility, it should be an HTML <button>—NOT a Webflow Button element, which is not an HTML <button> but a Link Block.

Add Condition

The element that adds a new condition within the current group
fs-list-element
=
"
condition-add
"

When clicked, the element with the fs-list-element="condition-add" attribute triggers the creation of a new condition block inside the group. Uses the structure defined by the template to clone and insert a new row.

Add this attribute:
Name
fs-list-element
Copy
Value
condition-add
Copy
Add it to this type of element
Image
Link
Link Block
<button> Custom Element
EXAMPLE

A link with the text “+ Add condition” and the fs-list-element="condition-add" attribute sits below the list of conditions. When clicked, a new condition row is inserted into the current group.

4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more elements and settings to the Dynamic Filters

Condition Match

The logic applied between conditions inside a group (e.g., AND or OR)
fs-list-element
=
"
condition-match
"

The fs-list-element"condition-match" attribute is added to a Select element used to switch the internal logic between multiple Conditions in a single group. It appears as soon as the user adds a second Condition.

When set to and, all conditions must be true for the group to match. When set to or, only one condition needs to match.

The Select element receiving this attribute must be a child of the element with fs-list-element="condition-group".

Add this attribute:
Name
fs-list-element
Copy
Value
condition-match
Copy
Add it to this type of element
Select
NOTE

This element is optional, because if you don't use any, the matching logic between conditions inside of a condition group defaults to and.

Condition Group Match

The matching logic applied between groups (e.g., AND or OR)
fs-list-element
=
"
condition-group-match”
"

The fs-list-element"condition-group-match" attribute is added to a Select element used to switch the internal logic between multiple Condition Groups. It appears in the filters UI as soon as a second Condition Group is added by the user.

When set to and, all conditions must be true for the group to match. When set to or, only one condition needs to match.

The Select element receiving this attribute must be a child of the Form element, and not placed inside the element with fs-list-element="condition-group".

Add this attribute:
Name
fs-list-element
Copy
Value
condition-group-match
Copy
Add it to this type of element
Select
NOTE

This element is optional, because if you don't use any, the matching logic between condition groups defaults to and.

Add Condition Group

The element that adds a new condition group
fs-list-element
=
"
condition-group-add
"

The element with fs-list-element="condition-group-add is used as a trigger to add a new Condition Group group to the filters UI.

The newly created group includes its own condition rows and internal logic options.

Add this attribute:
Name
fs-list-element
Copy
Value
condition-group-add
Copy
Add it to these types of elements
Image
Link
Link Block
<button> Custom Element
EXAMPLE

A button at the bottom of the filter interface labeled “Add another group,” used to expand the filter complexity.

NOTE

The good practice to build this element is to use a <button> made out of a Custom Element. It's the right thing to do because this element is making an action on the page when clicked. In terms of accessibility, it should be an HTML <button>—NOT a Webflow Button element, which is not an HTML <button> but a Link Block.

Remove Condition Group

Element that removes a condition group from the filters UI
fs-list-element
=
"
condition-group-remove
"

The element with fs-list-element="condition-group-remove is used as a trigger to remove the Condition Group group it belongs to. Useful for allowing users to cleanly remove groups in dynamic filter UIs.

Add this attribute:
Name
fs-list-element
Copy
Value
condition-group-remove
Copy
Add it to these types of elements
Image
Link
Link Block
<button> Custom Element
EXAMPLE

An icon inside the group header with an “X” or trash can symbol. When clicked, the entire group disappears from the interface.

NOTE

In the filters UI template we propose, we chose to use a simple image for this element. However, the right thing to do is to use a <button> made out of a Custom Element. It's the right thing to do because this element is making an action on the page when clicked. In terms of accessibility, it should be an HTML <button>—NOT a Webflow Button element, which is not an HTML <button> but a Link Block.

NOTE

This element is optional, but without it, users can't remove Condition Groups, they'll need to refresh the page to start with a blank filters UI. It's recommended to use this element.

Style Inactive Elements

Hide or style Add, Remove and Match inactive elements
fs-list-dynamicdisabledclass
=
"
CLASS_NAME
"

When there's only one condition, the condition-match element is not needed, it's inactive. And when there's only one Condition Group, the condition-group-match element is also inactive.

Inactive triggers are set with a is-list-dynamic-disabled class. You can use that class to:

  • Style their inactive state (e.g., gray them out)
  • Make them disappear
  • Make them invisible, which keep their space in the filter UI and prevents the UI to change shape when they're added
Add this attribute:
Name
fs-list-dynamicdisabledclass
Copy
Value
CLASS_NAME
Copy
default class
.is-list-dynamic-disabled
Add it to elements with
fs-list-element = "condition-group-match"
fs-list-element = "condition-group-remove"
fs-list-element = "condition-match"
fs-list-element = "condition-remove"
Example
fs-list-dynamicdisabledclass = "disabled-triggers"
Optional

Add more

elements

Clear

Defines a button or link that resets all filters when clicked
fs-list-element
=
"
clear
"

Add the fs-list-element = "clear" attribute to a Button or Link element. When clicked, it will clear all active filters.

This element must be nested inside the fs-list-element= "filters" element.

Add this attribute:
Name
fs-list-element
Copy
Value
clear
Copy
Add it to these types of elements
Text Link
Link Block
Button
NOTE

The setup above clears all active filters in the filters UI. To clear individual filter categories, multiple Clear buttons can be used—each targeting a specific category.

Add the fs-list-field= "IDENTIFIER" attribute to the Clear element, using an IDENTIFIER value that matches the filter category to be cleared.

Items Count

Display the total number of published items in the Collection
fs-list-element
=
"
items-count
"

Add the fs-list-element = "items-count" attribute to a Text element to display the total number of published Items in the current Collection. This represents the number of items in the unfiltered Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
items-count
Copy
Add it to these types of elements
Text Block
Text Span
EXAMPLE

If there are 68 published Items, the Text element with this attribute will display “68” on the published site.

It's useful for displaying messages like “Showing 42 out of 68 results.”—Check the next Attribute for binding the first number to the number of current results in the filtered List.

Instead of using multiple Text elements, you can use one single Text element for the sentence, and turn the number placeholders into <span>, and set the attributes on the span elements. This should look like this:
<Showing <span>00</span> out of <span>00</span> results>. This way, you keep a clean and accessible HTML structure.

Results Count

Display the current number of Items in the Filtered List
fs-list-element
=
"
results-count
"

Add the fs-list-element = "results-count" attribute to a Text element to display the current number of results, i.e., how many Items are showing in the filtered Collection List.

At a given time, if the filtered List shows 42 results—or Items—the Text element will display “42” on publish. If a new filter is activated, and the number of results in the List changes, the Text element changes accordingly.

This is useful for showing messages like “Showing 42 out of 68 results.”

‍

Add this attribute:
Name
fs-list-element
Copy
Value
results-count
Copy
Add it to these types of elements
Text Block
Text Span

Tag

Defines a template element to act as an active filter tag
fs-list-element
=
"
tag
"

An active Filter Tag is a block that appears whenever a filter is activated, helping users keep track of active filters—especially useful when the Filters UI is too large or long to display fully.

By adding the fs-list-element = "tag" attribute to any div block, you create a template that will be duplicated and shown for each active filter.

Add this attribute:
Name
fs-list-element
Copy
Value
tag
Copy
Add it to this type of element
Div Block
* This component has more elements required to be able to work, check below.
WARNING

Here is the list of additional elements that are required for proper functionality of the Tag. They all have to be nested inside the Tag element. Continue reading to learn how to integrate them.

  • The Tag Field, showing the name of the active filter (e.g., Color)
  • The Tag Value, showing the current value of the field (e.g., Black)
  • The Tag Operator, showing the defined Operator for the filter (e.g., =)
  • The Tag Remove, added to an element that will serve as a Remove button, to deactivate the filter from its Tag (e.g., a Text element with ×, an SVG image of a cross)
back arrow

Tag Field

Text element showing the active filter name
fs-list-element
=
"
tag-field
"

Add the fs-list-element = "tag-field" attribute to a Text element that will display the filter's field name on Publish. I.e. the IDENTIFIER of the active filters.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-field
Copy
Add it to this type of element
Text Block
EXAMPLE

If the Tag must display Color = Black ×, use four text elements side by side in the Tag template, and add the fs-list-element = "tag-field" to the one that will show Color.

Tag Value

Text element showing the active filter field value
fs-list-element
=
"
tag-value
"

Add the fs-list-element = "tag-value" attribute to a Text element that will display the filter's field value on Publish.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-value
Copy
Add it to this type of element
Text Block
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-value" to the Text element that will show Black.

NEW

Tag Operator

A Text element showing the matching operator in use for this filter
fs-list-element
=
"
tag-operator
"

Add the fs-list-element = "tag-operator" to a Text element that will show the sign for the operator in use on the current filter.

The operators symbols displayed by default are mathematical symbols. The can be overriden by other symbols, or illustrations or text, using the next attribute.

Default symbols:

  • empty: ∅
  • not-empty: !∅
  • contain: ⊃
  • not-contain: ⊅
  • equal: =
  • not-equal: ≠
  • less: <
  • less-equal: ≤
  • greater: >
  • greater-equal: ≥
Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator
Copy
Add it to this type of element
Text Block
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-operator" to the Text element that will show =.

OPTIONAL

Tag Operator Override

Overrides tag operator symbol
fs-list-element
=
"
tag-operator-X
"

These attributes allow a series of elements inside a Tag template to appear only when a specific operator is used in a filter condition. This is useful for customizing how filter Tags display logic like =, ≠, ≤, etc., depending on the filter’s behavior.

Tag Operator Overrides are defined by placing elements inside the Tag template. These elements—such as Text, Images, or Div Blocks—are styled to represent specific operators.

Each element is assigned one of the attributes below, depending on the operator it should respond to. Only the element matching the active operator will be shown; all others remain hidden.

Equal
Not-equal
Contain
Not-contain
Greater
Greater-equal
Less
Less-equal
Empty
Not-empty

Add this attribute to the element representing the equal operator.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Add this attribute to the element representing the not-equal operator.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-contain
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-contain
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-greater
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-greater-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-less
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-less-equal
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-empty
Copy
Add it to the filter input element using
fs-list-element="tag-operator"

Instructions

Add this attribute:
Name
fs-list-element
Copy
Value
tag-operator-not-empty
Copy
Add it to the filter input element using
fs-list-element="tag-operator"
EXAMPLE

Elements used for tag template operators can be any element. A Text element, an Image or a Div Block with its content.

This way, you can use what you want as visualization for operators: unicode symbols like = or ≠, strings of text like equal or contain—which is useful if you want to have them in your own language, and allow Webflow Localize or anyother localization solution to automatically translate them—symbols as images or even emojis ⬆️.

Tag Remove

The element that removes the tag
fs-list-element
=
"
tag-remove
"

Add the fs-list-element = "tag-remove" attribute to any element that will become a remove or close button for the Tag. Clicking it will remove the Tag and deactivate the filter.

Add this attribute:
Name
fs-list-element
Copy
Value
tag-remove
Copy
Add it to these types of elements
Div Block
Text Block
Link Block
Text Link
Image
EXAMPLE

In the Tag template designed to show Color = Black ×, add the fs-list-element = "tag-operator" to the Text element that will show ×.

In this example, the element used is a Text element, but it could be any element. It's often designed as a close button or link, and frequently uses an image.

NOTE

If no element inside the Tag template has the fs-list-element = "tag-remove" attribute, the Tag element will not be removed. This attribute is completely optional.

NOTE

The Tag Remove element is, by definition, an HTML <button> element, as its interaction causes a change in the page content. For improved accessibility, a Webflow Custom Element can be used and defined as a <button> for the remove action. (Note: this refers to a Custom Element, not the Button element found in the Add panel.)

To ensure correct behavior, the element should be defined as a <button> in the Settings panel and include the close icon or symbol inside.

Mandatory: the attribute type="button" must be set to prevent the element from being interpreted as a Form submit button, which is the default behavior of HTML <button> elements.

Format Tag Numbers

Formats numbers and dates inside Tag elements based on locale
fs-list-formatdisplay
=
"
VALUE
"

This attribute allows numbers and dates displayed in filter Tags to be formatted according to a specific locale.

It helps present values in a way that’s familiar and readable for users based on language or region (e.g., using commas, decimals, or date formats appropriate to the selected locale).

Use true for user's locale
Define a specific locale

true

If fs-list-formatdisplay="true" is used, the format will default to the user’s locale. I.e., if a user visit the site from Spain, the numbers will be formatted thewaythey should for his country.

Add this attribute:
Name
fs-list-formatdisplay
Copy
Value
true
Copy
Add it to the filter input element using
fs-list-element="tag"
script icon
Script tag
?

A specific locale can be forced using BCP 47 language tags like fs-list-formatdisplay="en-US".

Add this attribute:
Name
fs-list-formatdisplay
Copy
Value
LANGUAGE_TAG
Copy
Add it to the filter input element using
fs-list-element="tag"
EXAMPLE

If a Tag shows a date like 2025-04-01, there's two ways it can be show using the French date format 01/04/2025.

  • if fs-list-formatdisplay="fr-FR" is applied, and the visitor of the website is in France.
  • if fs-list-formatdisplay="fr-FR" is applied. But the same format will be shown to everyone in the world.

Scroll Anchor

Defines an element where the page will scroll to when the List is filtered
fs-list-element
=
"
scroll-anchor
"

This feature scrolls the page to a specific position whenever the List is filtered. It helps keep filtered results in view, especially in layouts with long pages or multiple UI elements above the List.

To enable it, add fs-list-element="scroll-anchor" to a Div Block placed where the scroll should land.

This improves UX in filter interfaces with many items by ensuring the user always starts viewing content from the top of the List.

Add this attribute:
Name
fs-list-element
Copy
Value
scroll-anchor
Copy
Add it to this type of element
Div Block
IMPORTANT

The fs-list-element="scroll-anchor" attribute can be overridden, and scroll anchor behavior can be customized per action.

When fs-list-element="scroll-anchor" is present, the list will scroll to that anchor on any action — filtering, sorting, or paginating.

For more granular control, specific scroll anchors can be defined for each action:

  • fs-list-element="scroll-anchor-filter"
  • fs-list-element="scroll-anchor-sort"
  • fs-list-element="scroll-anchor-pagination"

When any of these are set, the list will scroll to the corresponding anchor only for that specific action.

Initial State

Defines an element that will be displayed initially, before any filter is activated
fs-list-element
=
"
initial
"

Add the fs-list-element="initial" attribute to a Div Block that contains the design for the Initial State. This element will appear on page load in place of the List content, and every time that the filters are reset.

It can be placed anywhere on the page and can include any content—text, design, or remain empty. When the site is published, the element will be moved inside the List.

This attribute is useful for creating a filtered List that behaves like a traditional web search engine. The user experience begins with a search field on an empty page, and results appear only after matching terms are entered.

Add this attribute:
Name
fs-list-element
Copy
Value
initial
Copy
Add it to this type of element
Div Block
NOTE

This is not an Empty State. It is an Initial State. Use this attribute if you want zero items to show initially in your list. Once the user interacts with the Filter UI, items will show based on the selected filters. If the user then resets all filter selections, the Initial State will show.

Empty State

Element shown when there is no item matching the filter
 fs-list-element
=
"
empty
"

When using a Webflow CMS Collection List for the filtered List, it's required to add the fs-list-element="empty" attribute to the Empty State element, for it to function properly.

Add this attribute:
Name
fs-list-element
Copy
Value
empty
Copy
Add it to this type of element
Empty State
EXAMPLE

Select the Collection List and enable the Empty State in the Settings tab. The Empty State element can then be designed with text, images, links, and other elements as needed. After editing, switch back to the default state of the Collection List.

Since the Empty State element appears when no results match the current filter configuration, it’s common to include a Clear button or link within it. This allows the user to reset the filters and start a new filtering process.

Optional

Add more

settings

Active Class

Custom active class for Filter UI elements
fs-list-activeclass
=
"
CLASS_NAME
"

Add an active class to a Filter UI element when it is selected.

Add this attribute to form elements:

with fs-list-field = "IDENTIFIER". Checkboxes, radios, text input all select all work.

  • if it's a Text Input field, add it to the Text Input element itself — the element with fs-list-field="IDENTIFIER".
  • if it's a Radio or Checkbox element, add it to the Radio Button Field element or the Checkbox Field element — the parent of the element with fs-list-field="IDENTIFIER".

To style the Active Class:

  1. Manually add the chosen class to the element — Text Input or Radio Button Field or Checkbox Field — or add the default .is-list-active class
  2. Style the element
  3. Remove the class from the element
Add this attribute:
Name
fs-list-activeclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-activeclass = "is-active"
Default:
fs-list-activeclass = "is-list-active"
Add it to this type of element
Element with fs-list-field = "IDENTIFIER" for a Text Input
Radio Button Field or Checkbox Field element for Checkboxes and Radios
script icon
Script tag
?
NOTE

When adding this attribute to the Checkbox/Radio element fs-list-field = "IDENTIFIER", the class will be added to the parent of the Checkbox/Radio Field element.

When adding this attribute to a text input or select input, the class will be added directly to this element.

If this is attribute is not set, .is-list-active is the default active class for all Filter UI elements.

NOTE

Add to an element with fs-list-field = "IDENTIFIER" to use this class name for this specific field identifier.

Add to an element with fs-list-element = "list" to use this class name for all filter UI elements with fs-list-field = "IDENTIFIER".

Animate the List

Define CSS animations on the List when a filter is activated
fs-list-filteringclass
=
"
CLASS_NAME
"

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

  • During a filter action, the .is-list-filtering class is added to the Collection List Wrapper. It is removed once the filter completes.
  • fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
  • The class can be renamed using the attribute fs-list-filteringclass.
Add this attribute:
Name
fs-list-filteringclass
Copy
Value
CLASS_NAME
Copy
Default:
fs-list-filteringclass = "is-list-filtering"
Example:
fs-list-filteringclass = "my-filtering-class"
Add it to this type of element
Collection List Wrapper
script icon
Script tag
?
NOTE

Please refer to the List Sort and List Load documentation pages for animating the List when it's sorted or loaded.

Highlight

Highlight the active search terms inside the CMS Collection Items
fs-list-highlight
=
"
true
"

Adds text highlight to filter keywords when they are active in the filter.

Apply to any Filter UI elements. Text Field, Checkbox, Select, anything.

Add this attribute:
Name
fs-list-highlight
Copy
Value
true
Copy
Default:
fs-list-highlight = "false"
Add it to any element with
fs-list-field = "IDENTIFIER"
script icon
Script tag
?
EXAMPLE

For example, if I search or filter "SEO" in the Filter UI, the Collection Items that match "SEO" will highlight the SEO text field.

By default, the class .is-list-highlight is used for styling the highlight.

Highlight Class

Change the class of the active search term highlight
fs-list-highlightclass
=
"
CLASS_NAME
"

Change the class that is used to style the highlight functionality.

Add this attribute:
Name
fs-list-highlightclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-highlightclass = "is-highlight"
Default:
fs-list-highlightclass = "fs-list-highlight"
Add it to any element with
fs-list-element = "list"
script icon
Script tag
?

Debounce

Wait some time until the filters are applied
fs-list-debounce
=
"
TIME_IN_MS
"

Set a period of time (in milliseconds) before the filter updates.

Useful for 'pausing' the filter from updating until the user is done typing.

Add this attribute:
Name
fs-list-debounce
Copy
Value
TIME_IN_MS
Copy
Example:
fs-list-debounce = "200"
To add debounce to a specific filter, add it to any element with
fs-list-field = "IDENTIFIER"
To add debounce to all filters, add it to any element with
fs-list-element = "list"
script icon
Script tag
?
EXAMPLE

Setting this option on a search text input can prevent filtered results from updating with each character entered. Setting a debounce value can show filtered results after the user has likely stopped typing.

Custom Field Type

Defines a custom type for a list field. I.e., number or date.
fs-list-fieldtype
=
"
VALUE
"

This attribute is used to tell the filtering system how to treat the data in a field when applying filters. It is required when using comparison operators like greater or less, which need to understand whether a field contains numbers, dates, or plain text.

By default, all fields are treated as text. If a field contains numeric or date-based content, the correct type must be set using this attribute to ensure proper comparisons.

Chose the VALUE for the field type you need. Remove the attribute entirely to return to a standard text field.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
VALUE
Copy
Default:
fs-list-highlight = "false"
Add it to any element with
fs-list-field= "VALUE"
Add it to these types of elements
Checkbox Field
Radio Button Field
Select
number
date

number

Treats the field as a numeric value, allowing filters to compare values using operators like greater, less, etc.

Example: A field with 1999 will be evaluated as the number 1999.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
number
Copy
Add it to the filter input element using
fs-list-field

date

Treats the field as a date value in YYYY-MM-DD format, enabling date-based comparisons.

Example: A field with 2024-05-01 will be evaluated as a date.

Add this attribute:
Name
fs-list-fieldtype
Copy
Value
date
Copy
Add it to the filter input element using
fs-list-field
EXAMPLE

To compare a “Year” field using a greater-than filter, the element displaying the year must include fs-list-field="year" and fs-list-fieldtype="number". This allows the filter to correctly interpret the year as a number rather than a text string.

IMPORTANT

If the field type is not set correctly, filters using comparison operators may not behave as expected. Always define the field type when using numerical or date-based logic.

Allow Form Submit

Allow users to submit the filter form
fs-list-allowsubmit
=
"
true
"

When using a filter inside a form, allow the user to submit the form.

By default, form submissions are disabled in Attributes CMS Filter. Set this attribute to true to enable form submissions in your Filter UI.

It is required to have a form submit button inside the form.

Useful for filtering through a long list of radio or checkbox options inside a form, which the user should submit.

Add this attribute:
Name
fs-list-allowsubmit
Copy
Value
true
Copy
Default:
fs-list-allowsubmit = "false"
Add it to any element with
fs-list-element = "list"
script icon
Script tag
?
NEW

Fuzzy Search

Allows a forgiving matching on entered search terms
fs-list-fuzzy
=
"
THRESHOLD
"

Fuzzy search returns results that closely match a term, even if there are typos, misspellings, or partial matches. It’s useful for handling imperfect input or user error.

To enable Fuzzy search on the Search field—the Text Input element with fs-list-field="IDENTIFIER"—two attributes must be added:

1. fs-list-operator="equal" defines a strict matching logic required for Fuzzy search to function correctly.

2. fs-list-fuzzy="THRESHOLD" sets the tolerance level for Fuzzy matching. The THRESHOLD value ranges from 0 to 100, where 0 allows only exact matches and 100 allows maximum flexibility. A value of 20 is a recommended starting point and can be adjusted as needed.

Add this attribute:
Name
fs-list-fuzzy
Copy
Value
THRESHOLD
Copy
Add it to any element with
fs-list-field="IDENTIFIER"
Add it to these types of elements
Input
script icon
Script tag
?
EXAMPLE

Filter input: "electrik"
Field value: "electric" → ✅ Match with Fuzzy enabled
Field value: "hybrid" → ❌ No match

NEW

Custom Event

Changes the event type that triggers filtering
fs-list-filteron
=
"
VALUE
"

This attribute controls when filters are applied, depending on how users interact with the filter Form. By default, filtering happens immediately as users interact with inputs, but this can be adjusted to wait for specific events.

change
submit

‍change

Triggers the filter when a field value changes and loses focus. Useful for dropdowns, checkboxes, or similar inputs where filtering should occur after a clear change.

Add this attribute:
Name
fs-list-filteron
Copy
Value
change
Copy
Default:
fs-list-filteron = "input"
Add it to the Form element with
fs-list-element="filters"
script icon
Script tag
?

submit

Triggers the filter only when the form is submitted. Use this to allow users to select multiple filters before applying them all at once.

Add this attribute:
Name
fs-list-filteron
Copy
Value
submit
Copy
Default:
fs-list-filteron = "input"
Add it to the Form element with
fs-list-element="filters"
EXAMPLE

To allow users to select multiple filters and apply them by clicking a submit button, set the Form’s fs-list-filteron value to submit. This prevents filters from applying instantly and instead waits for the user to confirm their selections.

This can be useful to prevent too many filtering passes from happening in a short period of time, avoiding layout flickering and offering a more controlled user experience.

NOTE

The default behavior for filters Forms is input. If this is the desired one, there's no need to add this attribute.

input (default)

Triggers the filter as the user types or interacts with a field. Best suited for text inputs or real-time filtering.

To revert to this behavior after having changed it to change or submit, simply delete this attribute.

NOTE

fs-list-filteron="submit" doesn't require fs-list-allowsubmit="true". They're different attributes, they serve a different purpose.

  • fs-list-allowsubmit is only needed if you want to submit the Form to Webflow as usual (Form is submitted -> thank you message appears → data is collected by Webflow)
  • fs-list-filteron="submit" triggers the filters on submit, independent of wether the data is sent to Webflow or not
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-list-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-instance = "1"
fs-list-instance = "2"
fs-list-instance = "blog"
fs-list-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support