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 same ID 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 to Text 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, set Cache 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.
1. Navigate to the referenced collection.
2. Find the Los Angeles item.
3. Copy its slug.
4. Paste in the Filter+.
5. 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.

← Previous

CMS+ Count+

← Previous

CMS+ Count+

← Previous

CMS+ Count+

CMS+ Search+