Finsweet Attributes

Finsweet CMS Filter

No items found.
Attributes Notes
Finsweet Form Submit
Finsweet CMS Load
Finsweet CMS Nest
Finsweet CMS Sort
Finsweet ToC
Finsweet Rich Text
Finsweet Input Counter
Finsweet CMS Filter
Finsweet CMS Filter
Automatic Filtering
Browser Extension Candies
Finsweet's Unbind CMS
Troubleshooting your Finsweet Attributes Config
No items found.

Finsweet's CMS Filter tool is probably one of their most popular toolsets.

It allows you to dynamically filter CMS data using a Webflow-designed form as your filtering controls.

You can filter on;

  • Specific categories, such as #tags or product categories
  • Dates, including single dates and date ranges
  • Text matches, such as a partial product name

Learn more:

Filter UX

Radio Buttons

The label text itself is the filtered-matching content.

Button styling and a11y considerations can be handled well using Finsweet's cloneable or library, which has a11y filter elements.

Creating an "All" button;


Selects as range filters

Special Notes

Using Dates

Your data can contain multiple individual dates and date ranges, and Finsweet seems to handle this collection of dates well.

Finsweet supports date-range filtering in the filter, so you can filter elements that are between a from and to date.

It also allows your filtered data to specify from and to dates, so that if the ranges overlap, it's considered a matched item.

Note however, that a date range in which the start and end date are the same will not work properly.

Progressive Filtering

In complex filter setups, it may be desirable to progressively filter your UX so that your filtering options are themselves filtered.

For example, a single list of all of the cities of the world isn't very user friendly. Ideally, you'd progressively filter by continent, then country, and then see the cities just in that country.

To some extent, simple arrangements like this are possible with multiple filters.

Demo & cloneable;

Range Filtering

Range filtering has 3 possible scenarios;

  • 1-N where a single value is specified in the filter, but the filtered results specify a range which that filtered value should match
  • N-1 where the filter specifies a range, but the results have single values to match
  • N-N where both the filter and the data identify ranges, and matches should intersect

Three possible types of ranges

  • numeric range
  • date range
  • alphabetic match range ( e.g. aardvark to azimuth )

Date Range Filtering Problems

Finsweet Filter currently [ 2023-07-14 ] appears to have a bug which prevents date range filtering in the N-1 scenario and likely N-N as well.

However 1-N seems fairly reliable?


Advanced Use

Attributes API

Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.