List Filter

List Filter • Flash Card

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

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

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

Condition Groups Matching Logic

Add to any Form element

fs-list-groupsmatch

Conditions Operator

Add to any Form element

fs-list-operator

VALUE

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 .

Copy Script

Pick a setup method for the filtered list

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

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.

NOTE

Single Form filtering multiple Lists

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

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

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.

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

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.

In the filter Form, add the fs-list-field= "IDENTIFIER" attribute to the Checkbox Field element. This enables the toggle functionality.
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.
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:‍

‍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.
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.
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.
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)

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.

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 template element itself will act as the Close button. Tags must always include a way to be removed.

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.

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

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.

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:

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
Style the element
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 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 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
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

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

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

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.

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

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

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

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

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

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

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

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

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

Copy

Default:

fs-list-groupsmatch="and"

Add it to the Form element with

fs-list-element="filters"

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

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

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

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.
Set the content of the Select elements with the condition-field, condition-operator and condition-value attributes by following the documentation.
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

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

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”).

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.

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.

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

Select the Select element
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

select the Select element
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

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.

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

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.

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

Scroll Anchor

Defines an element where the page will scroll to when the List is filtered

fs-list-element

scroll-anchor

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

Initial State

Defines an element that will be displayed initially, before any filter is activated

fs-list-element

initial

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.

Add this attribute:

Name

fs-list-element

Copy

Value

initial

Copy

Add it to this type of element

Div Block

NOTE

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

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:

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
Style the element
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 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 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 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 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 tag

EXAMPLE

Custom Field Type

Defines a custom type for a list field. I.e., number or date.

fs-list-fieldtype

VALUE

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

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

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

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

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

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:

Select a wrapper parent that contains all the elements of an instance.
Add an -instance attribute to it, with a unique value.
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

List Filter • Flash Card

Required attributes

List

Filters

Field Identifier

Checkbox or Radio Value

Optional elements

Search Field

Toggle Button

Clear

Items Count

Results Count

Tag

Tag Field

Tag Value

Tag Operator

Tag Operator Override

Tag Remove

Scroll Anchor

Initial State

Empty State

Facet Count

Active Class

Filter All

Show Query

Optional settings

Clear Specific ilter

Highlight

Debounce

Start Checked: Checkbox

Start Checked: Radio

Custom Field Type

Format Tag Numbers

Allow Form submit

Fuzzy Search

Custom Event

Empty Filters

Filter Values Matching Logic

Condition Values Matching Logic

Condition Matching Logic

Condition Groups Matching Logic

Conditions Operator

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

Pick a setup method for the filtered list

Add these required attributes to the elements

List

Filters

Multiple Forms and Multiple Lists

Single Form filtering multiple Lists

Field Identifier

Checkbox or Radio Value

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

Add more

elements

Search Field

Toggle Button

Clear

Items Count

Results Count

Tag

Tag Field

Tag Value

Tag Operator

Tag Operator Override

Tag Remove

Scroll Anchor

Initial State

Empty State

Facet Count

Range Slider

List Sort

List Load

Add more

settings

Active Class

Animate the List

Filter All Button

Show Query

Clear Specific Filter

`not-equal`

`not-exist`

`less`

`less-equal`

`greater`

`not-exist`

`less`

`less-equal`

`greater`