Creating Interactive Filters with Finsweet Attributes v2

Dynamic content filtering in Webflow without writing custom JavaScript used to be complicated. But with Finsweet Attributes v2, it’s not only possible, it’s incredibly easy.

‍

Whether you’re building a blog, product catalog, portfolio, or job board, interactive filters help users find what they need quickly. In this post, I’ll walk you through how to use Finsweet’s CMS filter attributes to create powerful, code-free filters directly within Webflow.

‍

What are Finsweet Attributes?

‍

Finsweet Attributes is a free collection of plug-and-play HTML attributes that extend the functionality of Webflow. No custom code required.

‍

The Filter component (v2) allows you to:

• Create filters by categories, checkboxes, dropdowns, searches, or even range sliders
• Combine multiple filters together
• Filter Webflow CMS lists in real time
• Create responsive, user-friendly interfaces
• ‍

Getting started with Filters (v2)

‍

Step 1: Add a CMS Collection List
Start with a basic CMS collection list. This will be the list that will be filtered.

For example, a “Blog Posts” collection with fields like:

Category

Author

Labels

Date

‍

Step 2: Add the required script
Go to Page Settings > Before </body> and paste this:

html
Copy
Edit
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
This loads the Finsweet CMS filter engine on the page.

‍

Step 3: Add attributes to the collection list
In Webflow Designer:

Select the collection list wrapper

Add this attribute:

ini
Copy
Edit
fs-cmsfilter-element = "list"
This tells the script which list to filter.

‍

Step 4: Create the filter controls
Now you can add your actual filters. For example:

Checkbox filter (e.g. by category):
html
Copy
Edit
<div fs-cmsfilter-element="filter" fs-cmsfilter-field="category">
<label>
<input type="checkbox" value="Design"> Design
</label>
<label>
<input type="checkbox" value="Development"> Development
</label>
</div>
Drop-down filter:
html
Copy
Edit
<select fs-cmsfilter-element="filter" fs-cmsfilter-field="author">
<option value="">All authors</option>
<option value="Jane Doe">Jane Doe</option>
<option value="John Smith">John Smith</option>
</select>
Search filter:
html
Copy
Edit
<input type="text" placeholder="Search posts..." fs-cmsfilter-element="search">

‍

Now you have real-time filtering without coding.

‍

Combining filters for an advanced user experience

‍

One of the most powerful features of Attributes v2 is filter stacking, which means you can combine multiple filters at once.

For example, users can:

• Search by keyword
• Filter by category and tag
• Use the drop-down menu to select an author
• Combine all filters together
• And it just works.

‍

Optional: Reset button
Add this attribute to a button to clear all active filters:

html
Copy
Edit
<button fs-cmsfilter-element="reset">Reset filters</button>
Instantly resets everything and redisplays all items.

‍

Fully customizable (works on all devices)

Keyboard accessible (great for compliance with accessibility regulations)

Lightweight and fast (built for performance)

‍

When to use Finsweet filters?

‍

You should use CMS filtering when:

• You want to improve UX by quickly browsing content
• You have a CMS with lots of items (blog posts, jobs, team members, etc.)
• You want code-free multiple filter capabilities
• You want full style control within Webflow

‍

Make sure your value in the filter entries exactly matches the CMS field values ​​(capitalization and spacing).

Use fs-cmsfilter-mode="dynamic" on the filter wrapper if the CMS items change dynamically (like with pagination).

Combine with Finsweet sorting for even more flexibility.

‍

Here are some ideas for real-world applications:

1. Here are some ideas for real-world applications:
2. Blog filters (by category, author, tags)
3. Product catalogs (by size, price, type, availability)
4. Team pages (filter by department or role)
5. Location directories (by city, country, or type)

‍

Finsweet’s CMS filter (v2) is one of the most powerful and customizable ways to bring real interactivity to your Webflow projects. It’s fast, flexible, and doesn’t require any custom JavaScript.

If you want to enhance your Webflow projects with advanced filtering while keeping it clean and code-free, this is the tool to use.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍