How to Add Dynamic Filters
Learn how to add dynamic filters to your website and explore the different filter options available.
Dynamic Filters let visitors narrow down CMS content on your published site in real time. You can add interactive controls like search fields, tabs, toggles, dropdowns, and checkboxes to any collection list, giving your audience a fast way to find exactly what they’re looking for.
Adding a dynamic filter
Select the collection list on the canvas.
Navigate to the “Content” section within the properties panel.
Select “Filter”, and then choose the field type you’d like to filter by.
Under the “Dynamic” heading, select one of the available filter types.
Framer automatically creates a page variable for each dynamic filter. The filter control is added to the canvas as a regular layer, so you can move it anywhere on the page and style it however you like.
Available filter types
The filter types you see depend on the CMS field type you’re filtering. Here’s what’s available:
Search Field. Available for Text fields. Adds a text input so visitors can type to search and filter items by matching text content.
Tabs. Available for Collection Reference and Multi Collection Reference fields. Displays filter options as a row of clickable tabs, ideal for category-style navigation.
Toggles. Available for Collection Reference and Multi Collection Reference fields. Shows filter options as toggle buttons that visitors can switch on and off.
Dropdown. Available for Boolean, Collection Reference, Multi Collection Reference, and Option fields. Presents a dropdown select menu for compact, single-choice filtering.
Checkboxes. Available for Collection Reference and Multi Collection Reference fields. Adds a checkbox group so visitors can select multiple filter values at once.
Checkbox (single). Available for Boolean fields, as well as Link, Image, File, and Gallery fields (where it checks whether the field has a value). Great for simple yes/no toggles like “Show only featured items.”
Number Field. Available for Number fields. Lets visitors type a number to filter items by a numeric value.
Date Picker. Available for Date fields. Lets visitors select a date to filter items.
Customizing filter controls
Because dynamic filter controls are regular canvas layers, you have full design freedom. Select the filter layer on the canvas and adjust its styling (colors, fonts, spacing, layout) just as you would with any other element. You can also reposition filters anywhere on the page; they’re not locked to the collection list.
Adding a “Clear Filters” button
You can let visitors reset all active filters with a single click. Add a button or link to your page and set up an interaction that resets the page variables associated with your filters. This gives visitors a quick way to start a fresh search.
Compatibility
Dynamic Filters work seamlessly with other Framer features, including Empty States (to show a message when no items match) and Pagination.
If you’re still experiencing issues, please reach out to us through our contact page for further help.
FAQ
How do I add a dynamic filter to a collection list?
Select the collection list on the canvas, then navigate to the “Content” section within the properties panel. Select “Filter” and choose the field type you’d like to filter by. Under the “Dynamic” heading, select one of the available filter types. The filter control will be added to the canvas, and a page variable will be created automatically.
What filter types are available for dynamic filters?
The available filter types depend on the CMS field type. Options include Search Field (for text), Tabs, Toggles, Dropdown, and Checkboxes (for reference and option fields), Checkbox (for boolean and “is set” checks), Number Field (for numbers), and Date Picker (for dates). Framer automatically shows the relevant options based on the field you select.
Can I customize the look and placement of dynamic filters?
Yes. Dynamic filter controls are regular canvas layers, so you can move them anywhere on the page and style them just like any other element, adjusting colors, fonts, spacing, and layout to match your design.
How do I add a “Clear Filters” button?
Add a button or link to your page and set up an interaction that resets the page variables associated with your dynamic filters. This lets visitors clear all active filters and start fresh with a single click.
Do dynamic filters work with Pagination and Empty States?
Yes. Dynamic Filters are fully compatible with existing Framer features like Empty States (which display a message when no items match the filters) and Pagination.
Updated