CMS+ Filters+
Each supported Framer collection field has its own Filter+, allowing you to apply dynamic, on-demand filters to Collection+.
All CMS Plus filter components are toggle-driven, meaning they must be placed inside a design component to apply and remove its filter. Learn about toggle-driven components and their requirements.
Common Controls
Most filters will have these common controls, or similar variations. Be sure to check each filter type for any unique controls, its filtering conditions, and additional feature details.
Collection+ ID
Number of the Collection+ ID you want to control.Filter
This control triggers the apply or clear filter function. Learn about this concept.Field Name
Must match exactly as the field is named in its collection.Preserve
Enable/disable syncing with the filter state. Read about preserving.Condition
A dropdown menu displaying the available filter options. Check each filter type to explore its specific selection choices.Value
The specific criteria for the filter.
Interactions
Active Filter
Set the variant to be used when the filter is applied.Inactive Filter
Set the variant to be used when the filter is cleared.
Both interactions are required when
Preserve
is enabled. Read about preserving.
Basic Setup
While these steps apply to most filters, be sure to check each filter type for any exclusive features or specific controls. If a filter has unique options, you'll find more details in the Filter+ Types section below.
Check the collection field type you want to filter. This will guide you to choosing the appropriate Filter+ component.
Integrate the Filter+ component that matches the field type you're targeting into your component. Learn how.
Configure the Filter+ component controls in the primary variant. The available controls and options vary by component, so take time to explore each type to understand its specific requirements.
Important
If selecting to
Preserve
the filter state, add the required Interactions:Override
Filter
in the other variant. This is what triggers the sorting when transitioning between variants. Learn about triggering functionality.
Filter+ Types
Below is a list of every CMS Plus Filter+, each corresponding to a supported collection field. While most filters share consistent controls, some omit unnecessary ones, and others include unique controls. Each Filter+ details its filter condition options first, followed by any specialized features, controls, or setup instructions specific to that filter.
* Conditions exclusive to CMS Plus, offering additional options beyond Framer's native filters.
Date
Conditions
Equals
Doesn't Equals
Is Before
Is Before or Equal
Is After or Equal
Is Between Dates
Is Before
Is Before or Equal *
Is After
Is After or Equal *
Specialized Controls
Value Type
Select the type of value to use.Date Value
Set a date.Text Value
Input the date as a text in ISO 8601 format.
Using A Dynamic Date
Currently, Framer’s native fetching only supports text fields. Learn how to enable fetching for your project. Fetching is necessary to use dynamic dates, which requires an API that provides the time in ISO 8601 format.
With fetching, you can pass the current date in local time or specify a timezone. This functionality can be applied to both single date filters and date ranges. When selecting an API, it's important to carefully review its documentation for usage guidelines, pricing, and any limitations.
For the following example, I will be using TimeAPI.
Set the
Value Type
to Text to enable Framer's native fetching.Click the
+
symbol next toText Value
and select Add Fetch.Enter your API's URL in the provided text box.
Set
Path
to the property returning a text value in ISO 8601 format (e.g.,dateTime
in this example).(Optional) In
Advanced
, setCache
to 1 Day to minimize fetch requests, as the date updates every 24 hours.Support for Errors
If any errors arise, consult your API's documentation for troubleshooting. CMS Plus cannot assist with Framer fetching errors.
File
Conditions
Is Set
Isn't Set
Key Note
The Value control is not needed because this Filter+ only checks whether a value is set or not.
Formatted Text
Conditions
Is Set
Isn't Set
Key Note
The Value control is not needed because this Filter+ only checks whether a value is set or not.
Image
Conditions
Is Set
Isn't Set
Key Note
The Value control is not needed because this Filter+ only checks whether a value is set or not.
Link
Conditions
Is Set
Isn't Set
Key Note
The Value control is not needed because this Filter+ only checks whether a value is set or not.
Number
Conditions
Equals
Doesn't Equals
Greater Than
Greater Than or Equal
Less Than
Less Than or Equal
Is Between Numbers *
Greater Than
Greater Than or Equal
Less Than
Less Than or Equal
Specialized Controls
Enable number ranges by selecting the Is Between Numbers condition.
Start Condition
Is the start value inclusive or exclusive.Start
The minimum value of the range.End Condition
Is the end value inclusive or exclusive.End
The maximum value of the range.
Option
Conditions
Equals
Doesn't Equal
Plain Text
Conditions
Is Set
Isn't Set
Equals
Doesn't Equal
Starts With
Doesn't Start With
Ends With
Doesn't End With
Contains
Doesn't Contain
Reference
Conditions
Is Set
Isn't Set
Equals
Doesn't Equal
Is Included In
Isn't Included In
Specialized Controls
Slug
When setting a reference field for your CMS item, the available options are determined by the slugs in the referenced collection.
Example Walkthrough
I have a field called Dealership, which is a reference to another collection.
I want this Filter+ to target Los Angeles from the referenced collection.
Navigate to the referenced collection.
Find the Los Angeles item.
Copy its slug.
Paste in the Filter+.
Follow the rest of the basic setup steps for all Filter+ components.
Slug
Conditions
Equals
Doesn't Equal
Starts With
Doesn't Start With
Ends With
Doesn't End With
Contains
Doesn't Contain
Key Note
The Field Name
control is not needed because it is always named "Slug".
Toggle
Key Note
The Condition
control is not needed because this Filter+ only checks whether the value is true or false.