Problem or motivation
When displaying a list of CMS items on a page (e.g. blog posts, products, team members), there is currently no way for site visitors to narrow down the results. If a collection has dozens or hundreds of entries, users are forced to scroll through everything to find what they need. This makes content-heavy pages hard to navigate and leads to a poor user experience.
Proposed solution
Introduce a Filter Form element that can be linked to a collection list on the same page. The filter form would let site builders add filter controls (dropdowns, checkboxes, toggles, search inputs) that are bound to specific collection fields. When a visitor interacts with the filter, the collection list updates in real time to show only the matching items.
Key capabilities:
- A new "Filter Form" element available in the element library
- Ability to bind each filter control to a collection field (e.g. category, status, date range, tags)
- Support for multiple filter types: dropdown select, multi-select checkboxes, text search, toggle
- Real-time client-side filtering — no page reload needed
- Composable with existing design properties so the filter form can be styled freely
- Works with any collection type
Example use cases:
- A blog page with category and tag filters
- A product listing filtered by price range, color, or availability
- A team directory filtered by department or role
Alternatives considered
- Manual filtering with custom code: Users could embed custom JavaScript via an HTML embed layer to filter DOM elements, but this is fragile, requires coding knowledge, and bypasses the visual builder entirely.
- Separate pages per category: Creating individual pages for each filter value (e.g.
/blog/design, /blog/engineering), but this doesn't scale and creates maintenance overhead.
Area
Collections / CMS
Additional context
This is a common pattern in website builders and a natural extension of the existing collection list element. The filter form should feel like a first-class citizen in the editor — draggable, styleable, and configurable through the properties panel just like any other element.
Problem or motivation
When displaying a list of CMS items on a page (e.g. blog posts, products, team members), there is currently no way for site visitors to narrow down the results. If a collection has dozens or hundreds of entries, users are forced to scroll through everything to find what they need. This makes content-heavy pages hard to navigate and leads to a poor user experience.
Proposed solution
Introduce a Filter Form element that can be linked to a collection list on the same page. The filter form would let site builders add filter controls (dropdowns, checkboxes, toggles, search inputs) that are bound to specific collection fields. When a visitor interacts with the filter, the collection list updates in real time to show only the matching items.
Key capabilities:
Example use cases:
Alternatives considered
/blog/design,/blog/engineering), but this doesn't scale and creates maintenance overhead.Area
Collections / CMS
Additional context
This is a common pattern in website builders and a natural extension of the existing collection list element. The filter form should feel like a first-class citizen in the editor — draggable, styleable, and configurable through the properties panel just like any other element.