CMS Filter
Create advanced and complex no-code filter systems for Webflow CMS Collection List content.
Implement in Webflow Applying attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Required for minimum setup
Below is a list of three Attributes that are required for CMS Filter.
ONLY USE ONE FORM. You should not have more than one Form Block component to use CMS Filter.
All checkboxes, radios, selects, range sliders, inputs, and any other form element go inside this one Form Block.
Checkbox Label, Radio Label, Select, or Text Input Field
Text Block, Heading, Paragraph or Text Link
The IDENTIFIER value connects a Filter UI element to the correct field from Webflow CMS. 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.
The video below shows this process:
1. Add fs-cmsfilter-field="Countries" to the Filter UI.
--- Add this to each Checkbox Label in the Filter UI that should filter by Country. The text of the label will act as the search term. If the label of the checkbox is "Spain", the checkbox will filter by "Spain".
2. Add fs-cmsfilter-field="Countries" to the dynamic text inside the CMS Item template in your CMS filtered list.
--- Add it to the text element connected to the "Countries" CMS field. Any CMS Item that has "Spain" from this CMS field will be filtered.
Please look at the video below to see this concept in action. After a few implementations, you'll be a pro 💪
More attributes to use
Below is a list of Attributes that can help you customize your filter system.
For example, fs-cmsfilter-field = "countries, states, cities" will filter by all three categories.
To search for all CMS fields, use "*" as the value. For example fs-cmsfilter-field = "*"
Normal checkbox elements in our Filter UI get the fs-cmsfilter-field attribute on the Checkbox Label.
When creating a toggle, place the attribute on the Checkbox Input Field. This will enable a toggle effect for the checkbox.
+ Inside the CMS Collection Item, add an HTML Embed and give the HTML Embed the fs-cmsfilter-field = "IDENTIFIER" attribute. Inside the Embed block, add the Webflow CMS toggle field as a dynamic field.
See video below for entire workflow.
If a Submit Button (Webflow calls it Form Button) exists and is visible in your form, the Filter UI will filter on click of the Submit Button.
If the Submit Button does not exist or is not visible in your form, the Filter UI will filter the list instantly when a user interacts with any Filter UI element. Apply display: none to hide the submit button or delete the submit button from the page to have 'instant' filtering when filters are selected.
The display method allows you to have different filter experiences across multiple device sizes. For example, filter the list instantly for desktop experiences and filter the list on click for mobile experiences.
To clear filter categories individually, look at the available clear option below.
The clear button must be nested inside the fs-cmsfilter-element = filters element.
Text Block
If there are 42 items being shown in the filter results, this text element will show "42"
Text Block
If there are 68 items in the Collection List, this text element will show "68"
Useful for displaying information like "Showing 42 out of 68 results"
This is similar to the "Empty" state for a Webflow CMS List.
Div Block
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.
Apply this attribute to a div with any content inside. There can be a message, a design, or nothing at all. Setting this attribute anywhere on the page will 'turn on' initial state for the list.
Div Block, Button, Link Block, Text Block or Text Link
As filters are applied and removed from the list, 'active tags' will be added and removed from the page. This can help users better navigate complex filter systems with many filterable options and dropdowns.
This attribute is applied to the 'tag' element that will serve as the template. This template will be used for all active tags on the published page.
Text Block
This is the text element that will be used to display the active tag text.
If not specified, the tag-template element itself will be used to display the tag text.
Div Block, Link Block, Text Block or Image
This element will remove the tag that is filtered when clicking on it.
If not specified, the tag-template element itself will be used as the remove trigger.
Div Block
Useful for improving ux of filter interfaces with many items. Anchor scrolling to the top of the page will assure the user is always seeing content from the top of the List.
Add this attribute to any form element with fs-cmsfilter-field = "IDENTIFIER". Checkboxes, radios, text input all select all work.
When adding this attribute to the Checkbox/Radio Label element fs-cmsfilter-field = "IDENTIFIER", the class will be added to the parent Checkbox/Radio Field.
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, '.fs-cmsfilter_active' is the default active class for all Filter UI elements.
Add to an element with fs-cmsfilter-element = "list" to use this class name for all filter UI elements with fs-cmsfilter-field = "IDENTIFIER".
Use case:
I want a user to be able to select "All" items in the filter. When "All" items are selected, I want to show an active state for the "All" button.
❌ Checkbox ❌
A checkbox does not logically work with the "All" filter. If you are filtering by "All items", then you can not add more in addition to that. You can't not have "All" AND something else in addition to that. It's already everything, or "All". Checkboxes work like this — I want [this] AND [something else] in addition. Checkboxes are not the correct web elements for filtering by All.
✅ Radio ✅
A radio does logically work with the "All" filter. You can filter by "All items" OR something else. To use the active state for a "All" radio button, see the attribute option below with full explanation. Use checked = "checked" to manage the active state.
💡"All" is a Clear button💡
Showing "All items" is the equivalent of resetting all applied filters. Resetting all applied filters will show us the entire list of items, or "All items". We must use the "Clear" attribute to reset the grid and show "All items".
Know that this can only be applied to one Radio element in the Radio Group. If multiple Radios need to be selected, use Checkboxes instead.
Common use case: There is an "All" button that can show all filters. Since all items show on page load, this is what should be initially checked for page load.
This option can be achieved with the Webflow native "Start checked" checkbox in Checkbox Settings.
Need to generate a custom url that loads the filter list based on the url?
Check out the "SHOW QUERY" option.
"any" = Any of the selected filters have to match in the item for the item to be filtered.
Default is "any". If you want "any", you don't have to add this attribute.
Example:
There are Services checkboxes for "SEO", "Branding", and "Development". If all 3 filters are selected, and the filters are set to "all", the item in the CMS list must have ALL 3 services within the item for the item to be filtered. If an item has "SEO" and "Development" only, it would not be returned. We need ALL to match.
There are Services checkboxes for "SEO", "Branding", and "Development". If all 3 filters are selected, and the filters are set to "any", the item in the CMS list must have ANY of the 3 services within the item for the item to be filtered. If an item has "SEO" only, it will be returned. If an item has "Branding" and "Development", it will be returned. We need any 1 match.
It's just needed for date formats like:
July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
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.
For example:
https://finsweet.com/attributes/cms-filter?countries=Spain&categories=Museum
By default, active tags will show without categories, like "Spain", "Barcelona", "Museum".
This option adds categories as titles like this "Country: Spain", "City: Barcelona", "Attraction: Museum"
Add to an element with fs-cmsfilter-field = "IDENTIFIER" to apply this Option to a specific CMS field. For example, you only want the "Countries" filter to show a category title on the active tag.
For example, by default, a search input that shows results from all fields will show "*" as the category title on the active tag. Override this default to "Search" to give the user more context into what the active tag represents.
Useful for 'pausing' the filter from updating until the user is done typing.
For 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.
Add to any element with fs-cmsfilter-element = "list" to add debounce to all Filter UI elements globally.
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.
For example, if I search or filter "SEO" in the Filter UI, the Collection Items that match "SEO" will highlight the SEO text field.
Apply to any Filter UI elements. Text Field, Checkbox, Select, anything.
By default, the class "fs-cmsfilter_highlight" is used for styling the highlight.
By default, the class "fs-cmsfilter_highlight" is used for styling the highlight.
Adding a value of "filter-highlight-active" will make "filter-highlight-active" the new active class when the filter is updated.
Possible options are linear, ease, ease-in, ease-out, ease-in-out.
Default is ease.
Values are in milliseconds. Default is 100ms.
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Working examples
See this solution working live in this Webflow project.
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
Is a natural history museum on the Upper West Side of Manhattan, New York City.
The Vatican Museums are the public museums of the Vatican City.
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
Parc Güell is a privatized park system composed of gardens and architectural elements.
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
It is the home of many of the most known work of arts, including the Mona Lisa.
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
Is a natural history museum on the Upper West Side of Manhattan, New York City.
The Vatican Museums are the public museums of the Vatican City.
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
Parc Güell is a privatized park system composed of gardens and architectural elements.
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
It is the home of many of the most known work of arts, including the Mona Lisa.
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
It is the home of many of the most known work of arts, including the Mona Lisa.
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
Parc Güell is a privatized park system composed of gardens and architectural elements.
Is a natural history museum on the Upper West Side of Manhattan, New York City.
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
The Vatican Museums are the public museums of the Vatican City.
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
Combinations using CMS Filter:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
They are mandatory for the system. It was built as a solution that can manage enterprise-level filters. Forms allow for natural accessibility and screen reader functions. This also takes out the requirement to have multi and exclusive labeled filter groups.
Sure they can!
First you have to use CMS combine then you will be able to filter both collections, this cannot be possible without CMS combine
Developer documentation
Next time implement inside Webflow
