CMS+ Search+

Search+ adds real-time search to your Framer projects, instantly filtering content in selected Collection+ components as users type. It can search all text CMS fields or specific ones you choose, making it a flexible tool for quick and efficient content filtering.

Key Features

• Search across multiple Collection+ components.

• Search within all supported fields, or select ones.

  Currently, Plain Text and Slug CMS fields are supported.

Controls

• Searches A list, each item contains these sub-controls:

  • Collection ID Use the same ID number as the Collection+ you want to link. Set up your Collection+ first.

  • All Fields By default, search across all supported CMS fields.

  • Fields If not searching across all fields, list select CMS fields.

• Preserve Enable autofill if input text exists. Read more about preserving.

• Font Set the font styles.

• Font Color Set the color of the user input.

• Placeholder (Optional) Display custom text if input is empty.

• Placeholder Color Set the color of the placeholder text.

Step-by-Step Setup

1. Insert onto your page.

2. Add items to Searches.

   • Set the target Collection+ ID number.

   • Choose to search within All Fields, or not.

   • If not searching within all fields, add items to Fields for select ones.

     

     To remove an item from a list, simply right-click on it.

   
   

3. Configure the rest of the controls to complete.

Creative Use Case

Search+ can be added to any frame and fully customized to match your design vision. For example, you can pair it with a CMS Plus Clear+ component to create a fully custom, functional search bar. Clear+ can be configured to target the same Collection+, allowing users to perform real-time searches and easily clear results—all within a design that’s uniquely tailored to your project.

See an example on the demo page.