CMS+ Filters+
Place them anywhere in your site, or insert them in a component to toggle their filtering function.
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
Use the sameID
number as the Collection+ you want to filter. Set up your Collection+ first.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.
Important
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.
Ensure the Filter+ type matches the CMS field type.
Integrate the Filter+ 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:Active Filter
&Inactive Filter
Override
Filter
in the other variant. This triggers its function 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.