How to add dynamic filters
Learn how to add dynamic filters to your CMS collections and help visitors find content faster.
Dynamic filters let visitors narrow down CMS content on your published site in real time. You can add interactive controls such as search fields, tabs, toggles, dropdowns, and checkboxes to any collection list, making it easier for visitors to find the content they’re looking for.
Add a dynamic filter
Select the Collection List on the canvas.
In the properties panel, open the Content section.
Select Filter and choose the CMS field you want to filter by.
Under Dynamic, select a filter type.
Framer automatically creates a page variable for each dynamic filter. The filter control is added to the canvas as a regular layer, allowing you to move and style it like any other element.
Available filter types
The available filter types depend on the CMS field type you select.
Filter type | Supported field types | Description |
|---|---|---|
Search Field | Text | Adds a search input that filters items based on matching text. |
Tabs | Collection Reference, Multi Collection Reference | Displays filter options as clickable tabs, ideal for category navigation. |
Toggles | Collection Reference, Multi Collection Reference | Displays filter options as toggle buttons that visitors can turn on or off. |
Dropdown | Boolean, Collection Reference, Multi Collection Reference, Option | Provides a compact dropdown menu for filtering content. |
Checkboxes | Collection Reference, Multi Collection Reference | Allows visitors to select multiple filter values at the same time. |
Checkbox (single) | Boolean, Link, Image, File, Gallery | Filters based on whether a field contains a value. Useful for options such as “Show featured items only”. |
Number Field | Number | Allows visitors to enter a numeric value to filter content. |
Date Picker | Date | Allows visitors to select a date to filter content. |
Customize filter controls
Dynamic filter controls are regular canvas layers, which means you have full control over their design and placement.
Select a filter control on the canvas to customize its colors, typography, spacing, layout, and other styling properties. You can also position filters anywhere on the page—they are not tied to the Collection List layout.
Add a clear filters button
You can provide a quick way for visitors to reset all active filters.
Add a button or link to your page.
Create an interaction for the element.
Configure the interaction to reset the page variables used by your filters.
This allows visitors to clear all filters and start a new search with a single click.
Compatibility
Dynamic Filters work alongside other CMS features, including:
Empty States, which display a message when no items match the selected filters.
Pagination, which continues to function correctly when filters are applied
Dynamic filters let visitors narrow down CMS content on your published site in real time. You can add interactive controls such as search fields, tabs, toggles, dropdowns, and checkboxes to any collection list, making it easier for visitors to find the content they’re looking for.
Add a dynamic filter
Select the Collection List on the canvas.
In the properties panel, open the Content section.
Select Filter and choose the CMS field you want to filter by.
Under Dynamic, select a filter type.
Framer automatically creates a page variable for each dynamic filter. The filter control is added to the canvas as a regular layer, allowing you to move and style it like any other element.
Available filter types
The available filter types depend on the CMS field type you select.
Filter type | Supported field types | Description |
|---|---|---|
Search Field | Text | Adds a search input that filters items based on matching text. |
Tabs | Collection Reference, Multi Collection Reference | Displays filter options as clickable tabs, ideal for category navigation. |
Toggles | Collection Reference, Multi Collection Reference | Displays filter options as toggle buttons that visitors can turn on or off. |
Dropdown | Boolean, Collection Reference, Multi Collection Reference, Option | Provides a compact dropdown menu for filtering content. |
Checkboxes | Collection Reference, Multi Collection Reference | Allows visitors to select multiple filter values at the same time. |
Checkbox (single) | Boolean, Link, Image, File, Gallery | Filters based on whether a field contains a value. Useful for options such as “Show featured items only”. |
Number Field | Number | Allows visitors to enter a numeric value to filter content. |
Date Picker | Date | Allows visitors to select a date to filter content. |
Customize filter controls
Dynamic filter controls are regular canvas layers, which means you have full control over their design and placement.
Select a filter control on the canvas to customize its colors, typography, spacing, layout, and other styling properties. You can also position filters anywhere on the page—they are not tied to the Collection List layout.
Add a clear filters button
You can provide a quick way for visitors to reset all active filters.
Add a button or link to your page.
Create an interaction for the element.
Configure the interaction to reset the page variables used by your filters.
This allows visitors to clear all filters and start a new search with a single click.
Compatibility
Dynamic Filters work alongside other CMS features, including:
Empty States, which display a message when no items match the selected filters.
Pagination, which continues to function correctly when filters are applied
FAQ
Why don’t I see every filter type in the menu?
Available filter types depend on the CMS field you selected. For example, Search Fields are only available for Text fields, while Date Pickers are only available for Date fields.
Can I place filters anywhere on the page?
Yes. Dynamic filters are added as regular canvas layers, so you can move and style them independently of the Collection List.
How do I reset active filters?
Create a button or link that resets the page variables associated with your filters. This clears all active filter selections at once.
Updated