Back

The Best Way to Filter CMS in Webflow with Finsweet’s Filter Attribute V2

LAST UPDATED
June 27, 2025
READ TIME
1 minute
WRITTEN BY
Ayu
Webflow CMS filter UI using Finsweet Attribute V2 with checkboxes, search input, and dropdowns connected to dynamic content list.

Webflow does not offer native filtering for CMS content. If you want users to filter blog posts, products, or team members by category, tag, or anything else, you are stuck, unless you use Finsweet.

Finsweet’s Attribute V2: CMS Filter is a no-code, modular, and highly flexible filtering solution.

This is a simple step-by-step to help you use it quickly:

Step 1: Add the Finsweet script inside the <head> tag of your page or project

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

Step 2: Set up the Collection List

Add this attribute in collection list (see image for reference):

fs-list-element
list

This tells Finsweet what items to filter.

Step 3: Set up the Form Filter UI

Add this attribute in form not form block (see image for reference):

fs-list-element
filters

This connects the filters with the result list.

Step 3: Match the filters (Using Radio)

  1. Add this attribute in Radio button (Form) and Collection List. Make sure both have same value.
fs-list-field
tag

You can put anything in Value, just keep same for both.

  1. As we are using Radio Button also put this :
fs-list-value
{{category}} // will come from collection list

Step 4: Adding Active state for filter

Add this attribute in radio button field:

fs-list-activeclass
is-list-active

You can put anything in Value. Make sure to style the class (see image for better understanding).

Bonus: Add All button in filter

  1. Add active class to All radio.
  1. Add this all attribute:
fs-list-field
tag

make sure to match with 3rd step.

fs-list-value

value would be empty in this.

checked
checked

Step 5: Publish and Test

Once everything is connected, publish your site. Finsweet handles the logic automatically.

Final Thoughts

Finsweet Filter V2 makes it incredibly easy to set up fast, scalable CMS filtering in Webflow using just simple attributes. It works instantly, is free to use, and gives full layout control.

Need help setting up Finsweet Filter in your Webflow build? I help teams and founders create filters that feel native and work perfectly. Let’s connect.

FAQs

Do I need to know code to use Finsweet Filter V2?

No. Everything works using simple attributes added directly in Webflow. You don’t need to write JavaScript.

Are there other filtering solutions for Webflow besides Finsweet?

Yes. Refokus also offers filtering capabilities.

Does Finsweet Filter offer more than basic checkbox and search?

Yes. Finsweet’s filter supports checkboxes, search, dropdowns, radio buttons, range sliders, and more. You can mix and match them all in one filter form.

Where can I find more filter options or examples?

Finsweet has an official page for Filter Attribute V2 at finsweet.com/attributes/list-filter, including demos, documentation, and use cases.

"Learn from yesterday, live for today, hope for tomorrow."

Browse more

Implementation of Splide.js slider in Webflow showing smooth, responsive carousel setup with custom navigation arrows and clean layout.
Webflow Tips

How to Implement Splide Slider in Webflow (Step-by-Step)

Logos of Webflow and Splide side by side, representing integration of Splide.js slider into Webflow for enhanced slider performance and flexibility.
Webflow Tips

The Better Webflow Slider: Why I Use Splide Instead

Ideas need legs. I build them.

From SaaS startups to solo founders, get clean, fast, Webflow sites built with clarity and care.

Get Started Now
Ayu Favicon Orange Logo