How to add an attribute:

close icon
Hey! Give us some feedback here.
collapse all icon
Collapse All
Filter and Sort

CMS Filter

Create advanced and complex no-code filter systems for Webflow CMS Collection List content.

CMS Filter
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

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.

navigator arrow
LIST
I want to filter the content of this

Collection List or Collection List Wrapper

See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-element
copy icon
copy button icon
Value
list
copy icon
Check live example here
This is the CMS Collection List that will be filtered.
how to add cms filter list attribute
navigator arrow
FILTERS
I want this
form icon

Form or Form Block

to have the Filter UI elements
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-element
copy icon
copy button icon
Value
filters
copy icon
This is the Webflow Form element that holds all Filter UI elements.

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.
how to add cms filter list attribute
navigator arrow
FIELD IDENTIFIER
When I interact with this Filter UI 
checkbox icon

Checkbox Label, Radio Label, Select, or Text Input Field

See how it works
see webflow attributes
element, I want to filter CMS items with this

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
question mark
Description
Name
fs-cmsfilter-field
copy icon
copy button icon
Value
IDENTIFIER
copy icon
This is how the Filter UI elements communicate with the Webflow CMS List.

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

navigator arrow
SEARCH FIELD
I want to use a
field element

Text Input Field

element in my Filter UI
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-field
copy icon
copy button icon
Value
IDENTIFIER
copy icon
Text Input Field search allows multiple IDENTIFIER values to specify which CMS fields the search input should search for.

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 = "*"
how to add an cmsfilter text field attribute
navigator arrow
TOGGLE BUTTON
I want to use a
checkbox icon

Toggle Button

element in my Filter UI
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-field
copy icon
copy button icon
Value
IDENTIFIER
copy icon
When creating a TOGGLE (true/false) button, there is one change to implementation.

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.
navigator arrow
SUBMIT BUTTON
I want the list to be filtered when the
button icon

Submit Button

is clicked.
See how it works
see webflow attributes
No attributes needed.

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.
navigator arrow
TAG TEXT
I want this

Text Block

to be the text label inside the tag template to show selected filters
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-element
copy icon
copy button icon
Value
tag-text
copy icon
The text that's nested inside the fs-cmsfilter-element="tag-template".

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.
how to add cmsfilter tag text attribute
navigator arrow
TAG REMOVE
I want this
div block icon

Div Block, Link Block, Text Block or Image

to remove the tag that is filtered
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-element
copy icon
copy button icon
Value
tag-remove
copy icon
The close element that is nested inside the fs-cmsfilter-element="tag-template".

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.
how to add cmsfilter tag remove attribute
navigator arrow
Option
ACTIVE CLASS
I want to have a custom active class on the Filter UI elements
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-active
copy icon
copy button icon
Value
class-name
copy icon
Add an active class to a Filter UI element when it is selected.

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.
Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER" to use this class name for this specific field identifier.

Add to an element with fs-cmsfilter-field = "list" to use this class name for all filter UI elements with fs-cmsfilter-field = "IDENTIFIER".
how to add cms filter active attribute
how to add cms filter active class
navigator arrow
Option
Start Checked: Checkbox
I want to have a checkbox selected on page load
See how it works
see webflow attributes
No attribute needed.

This option can be achieved with the Webflow native "Start checked" checkbox in Checkbox Settings.
start checked settings

Need to generate a custom url that loads the filter list based on the url?
Check out the "SHOW QUERY" option.
navigator arrow
Option
Start Checked: Radio
I want to have a radio button selected on page load (used for "All" buttons)
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
checked
copy icon
copy button icon
Value
checked
copy icon
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.

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.
Where?
Add to Webflow Radio input (the circle of the Radio)

--

Need to generate a custom url that loads the filter list based on the url?
Check out the "SHOW QUERY" option.
navigator arrow
Option
MATCH
I want to customize a Filter UI group to filter by "all"
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-match
copy icon
copy button icon
Value
all
copy icon
"all" = All of the selected filters have to match in the item for the item to be filtered.

"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.
Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER"
navigator arrow
Option
DATE
I want this element to be filtered by a date
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-type
copy icon
copy button icon
Value
date
copy icon
Indicates that the filter input is in date format.
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
Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER"
navigator arrow
Option
RANGE
I want to filter by range
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-range
copy icon
copy button icon
Value
from
copy icon
Indicates that this filter input is the "from" part of the range. This is the minimum of the filter range.
Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER"
Add this attribute
question mark
Description
Name
fs-cmsfilter-range
copy icon
copy button icon
Value
to
copy icon
Indicates that this filter input is the "to" part of the range. This is the maximum of the filter range.
Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER"
navigator arrow
Option
RESET
I want to reset results for a specific category of filters
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-reset
copy icon
copy button icon
Value
IDENTIFIER
copy icon
"Reset" all filters functionality for a specific "IDENTIFIER"
Where?
Add to an element with fs-cmsfilter-element = "RESET"
navigator arrow
Option
SHOW QUERY
I want to add query params to the URL when the user applies filters
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-showquery
copy icon
copy button icon
Value
true
copy icon
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.

For example:
https://finsweet.com/attributes/cms-filter?countries=Spain&categories=Museum
Where?
Add to an element with fs-cmsfilter-element = "list"
navigator arrow
Option
TAG FORMAT
On my 'active tag' elements, I want to show the category of each tag value
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-tagformat
copy icon
copy button icon
Value
category
copy icon
Adds the the CMS field's IDENTIFIER to each 'active tag'.

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"
Where?
Add to an element with fs-cmsfilter-element = "list" to apply this Option globally to all Filter UI categories.

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.
navigator arrow
Option
TAG CATEGORY
On my 'active tag' elements, I want to customize the category name to something other than the IDENTIFIER
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-tagcategory
copy icon
copy button icon
Value
"Search"
copy icon
Optionally override the default IDENTIFIER category tag name. Setting this attribute allows you to customize the name of the category in 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.

Where?
Add to an element with fs-cmsfilter-field = "IDENTIFIER" and fs-cmsfilter-tagformat = category to apply this Option to a specific CMS field. For example, you only want the "Countries" IDENTIFIER to show a category title of "Country".
navigator arrow
Option
DEBOUNCE
I want to wait a certain amount of time until the filter results update
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-debounce
copy icon
copy button icon
Value
200
copy icon
Set a period of time (in milliseconds) before the filter updates.

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.
Where?
Add to any element with fs-cmsfilter-field = "IDENTIFIER" to add debounce to a specific field or group of Filter UI elements.

Add to any element with fs-cmsfilter-element = "list" to add debounce to all Filter UI elements globally.
navigator arrow
Option
HIGHLIGHT
I want to highlight the active search terms inside the CMS Collection Items
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-highlight
copy icon
copy button icon
Value
true
copy icon
Adds text highlight to filter keywords when they are active in the filter.

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.
Where?
Add to any element with fs-cmsfilter-field = "IDENTIFIER"
navigator arrow
Option
HIGHLIGHT CLASS
I want to change the class of the active search term highlight
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-highlightclass
copy icon
copy button icon
Value
class-name
copy icon
Change the class that is used to style the highlight functionality.

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.
Where?
Add to any element with fs-cmsfilter-element = "list"
navigator arrow
Option
I want to hide filter options that have zero results based on the current active filters
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-hideempty
copy icon
copy button icon
Value
true
copy icon
Hides any checkbox or radio filter option that will return zero results based on the current active filter selection.

For example, if Country: "Spain" is selected as a filter, Cities: "California", "New York", and "Texas" will be hidden, as they will not return any results in Spain.
Where?
Add to any radio or checkbox element with fs-cmsfilter-field = "IDENTIFIER"
navigator arrow
Option
EASING
I want to change the easing of the fade animation of the list
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-easing
copy icon
copy button icon
Value
ease
copy icon
Change easing of the fade animation on the filtered Collection List.

Possible options are linear, ease, ease-in, ease-out, ease-in-out.

Default is ease.
Where?
Add to an element with fs-cmsfilter-element = "list"
navigator arrow
Option
DURATION
I want to specify the duration of the fade animation
See how it works
see webflow attributes
Add this attribute
question mark
Description
Name
fs-cmsfilter-duration
copy icon
copy button icon
Value
100
copy icon
Change duration of the fade animation on the filtered Collection List.

Values are in milliseconds. Default is 100ms.
Where?
Add to an element with fs-cmsfilter-element = "list"
navigator arrow
Option
NO 100 LIMIT
I want to show more than 100 items on this list
See how it works
see webflow attributes

Working examples

See this solution working live in this Webflow project.

Example 1
Filter CMS using radio buttons
Choose one country to filter the content:
Reset all
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Showing 0 results
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Christ the Redeemer
Rio de Janeiro
/
Brazil
Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

Walt Disney World
Orlando
/
United States
Walt Disney World

Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.

Iguazu Falls
Foz do Iguaçu
/
Brazil
Iguazu Falls

Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

Statue of Liberty
New York
/
United States
Statue of Liberty

Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.

Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

The Colosseum
Rome
/
Italy
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

Sagrada Família
Barcelona
/
Spain
Sagrada Família

Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.

Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

Arc de Triomphe
Paris
/
France
Arc de Triomphe

The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.

Torre Eiffel
Paris
/
France
Torre Eiffel

It is named after the engineer Gustave Eiffel, whose company designed and built the tower.

No results found.
Please try different keywords.
Copy and paste accessible CMS Filter components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 2
Filter CMS using checkboxes
Choose any country you want to visit:
Reset all
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Showing 0 results
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Christ the Redeemer
Rio de Janeiro
/
Brazil
Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

Walt Disney World
Orlando
/
United States
Walt Disney World

Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.

Iguazu Falls
Foz do Iguaçu
/
Brazil
Iguazu Falls

Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

Statue of Liberty
New York
/
United States
Statue of Liberty

Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.

Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

The Colosseum
Rome
/
Italy
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

Sagrada Família
Barcelona
/
Spain
Sagrada Família

Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.

Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

Arc de Triomphe
Paris
/
France
Arc de Triomphe

The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.

Torre Eiffel
Paris
/
France
Torre Eiffel

It is named after the engineer Gustave Eiffel, whose company designed and built the tower.

No results found.
Please try different keywords.
Copy and paste accessible CMS Filter components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 3
Filter CMS with all form elements
Search here:
clear
Choose any country you want to visit:
clear
Choose any category:
clear
Featured:
Reset all
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Services: SEO
close icon
Showing 0 out of 0 results
Sagrada Família
Barcelona
/
Spain
Sagrada Família

Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.

Most visited
Architecture
Culture
Historical
Paid tour
Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

Architecture
Culture
Free tour
Historical
Most rated
Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

Architecture
Culture
Historical
Most visited
Paid tour
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

Beach
Adventure
Free tour
Historical
Nature
The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Architecture
Culture
Historical
Most rated
Museum
The Colosseum
Rome
/
Italy
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

Architecture
Most visited
Historical
Most rated
Paid tour
Statue of Liberty
New York
/
United States
Statue of Liberty

Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.

Architecture
Culture
Historical
Most visited
Paid tour
American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

Architecture
Culture
Historical
Most visited
Museum
Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

Architecture
Culture
Historical
Paid tour
Most rated
Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

Beach
Free tour
Most visited
Torre Eiffel
Paris
/
France
Torre Eiffel

It is named after the engineer Gustave Eiffel, whose company designed and built the tower.

Most rated
Most visited
Architecture
Culture
Historical
Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

Architecture
Museum
Most visited
Most rated
Culture
Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

Architecture
Culture
Historical
Museum
Paid tour
Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

Architecture
Free tour
Historical
Most rated
Arc de Triomphe
Paris
/
France
Arc de Triomphe

The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.

Most visited
Architecture
Historical
Most rated
Free tour
Walt Disney World
Orlando
/
United States
Walt Disney World

Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.

Adventure
Paid tour
Entertainment
Most visited
Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

Architecture
Culture
Paid tour
Historical
Most rated
Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

Most visited
Nature
Free tour
Park
Christ the Redeemer
Rio de Janeiro
/
Brazil
Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

Architecture
Culture
Paid tour
Park
Most rated
The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

Park
Nature
Adventure
Most rated
No results found.
Please try different keywords.
Copy and paste accessible CMS Filter components for your project
locked icon
Clone Accessible Components UI KIT
new

FAQ

Everything you need to know about this attributes solution.

How can I change the highlight color in CMS Filter?
navigator arrow

Add this class to a blank div on the page, then set the background color. On the published page, the highlight color will be that new background color.

Will the attribute filter work with a dropdown element instead of a select element?
navigator arrow

No it must be a form element for filtering, dropdown can be used for sort.

Cms filter is duplicating value occurence into the select field, is there a way to check for duplicates and avoid this repetition?
navigator arrow

Currently no, our team is working on this for a future update. There is a workaround with JavaScript. Be sure to add it before the </body> tag.

How can I have 2 separate filters, mobile and desktop, for the same collection list?
navigator arrow

Define both filters under the same form block and hide/show respectively for either desktop or mobile.

Can I use attributes to filter by date range?
navigator arrow

Yes you can, add fs-cmsfilter-type = date to your element with fs-cmsfilter-field = "IDENTIFIER".

How to filter by any match on a CMS list? (example: filter "ABC" returns "ABC and some words" and "ABC more text")
navigator arrow

The fs-cmsfilter-match attribute default is any, this will return any item that matches at least one filter from your search. The all value needs to be an exact match to return an item.

Can the CMS Multi-filter and Load More feature be used together?
navigator arrow

If you are using attributes, CMS Filter will work with CMS Load.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.