Filtering, sorting & facets

Filter controls, a sort dropdown, and server-computed facet counts for one CMS list. Everything runs against the whole collection - filters and counts see every item, not just the rows Webflow rendered.

Shared setup - the script tag, list keys, templates, and data binding - is in the getting started guide.

Filters and sorting are not supported on global search yet - controls pointed at a search block are ignored with a console warning.

Minimal setup

Put data-slater-filter="<fieldSlug>" on a control. Native <select>, checkboxes, and radios all work:

<!-- Dropdown -->
<select data-slater-filter="year">
  <option value="">Any year</option>
  <option value="2024">2024</option>
</select>

<!-- Checkbox group (multiple) -->
<label><input type="checkbox" data-slater-filter="car-brand" data-slater-value="fulgor"/> Fulgor</label>
<label><input type="checkbox" data-slater-filter="car-brand" data-slater-value="stream"/> Stream</label>

Attribute	On	Value	Required
`data-slater-filter`	`<select>` / checkbox / radio	the CMS field slug (case-sensitive - confirm with `?slater-debug=1`)	yes
`data-slater-value`	checkbox / radio	the filter value to send	yes on checkboxes/radios - Webflow reserves the native `value` attribute on form inputs, so you can't set it in the Designer. `<option value>` works natively on selects.

What the filter value should be

The value can be the option/reference's id, slug, or name - matching is case-insensitive. Prefer the id (or slug) when you can: Webflow localizes an option's label and a reference's slug, but not their ids, so <option value="News"> only matches the English page while <option value="654f…a1"> matches every locale. The visible text stays whatever you authored - which is also what makes <option value="fashion-accessories">Fashion - Luxury</option> work.

Or leave the <select> empty and use facets - options, labels and counts are then filled from the data.

Optional attributes

Attribute	On	Value	Default
`data-slater-filter-match`	a filter control	`all` - item must carry every selected value in this field	`any`
`data-slater-sort`	`<select>`	the list key; option values are `[-]field` sort keys	-
`data-slater-default-sort`	list wrapper	`[-]field` — initial sort	-
`data-slater-facets`	list wrapper	comma list of field slugs to facet	-
`data-slater-clear`	`<button>`	the list key - resets every filter + the search box	-
`data-slater-for`	any control	the list key, when the control isn't nested inside the wrapper	containment

Combining filters

Situation	Behaviour
Several checkboxes in one field checked	OR - items matching any selected value
Two different fields both set	AND - items matching both
"Must have ALL selected values" in one field	add `data-slater-filter-match="all"` to the controls

Sorting

<select data-slater-sort="blog">
  <option value="-lastPublished">Newest</option>
  <option value="name">Name A–Z</option>
</select>

A leading - means descending. Sort on name, slug, any text/number/date field, or the system dates (createdOn, lastUpdated, lastPublished).

Numbers stored as text sort lexically - "43,100" (with a comma) orders as text. Only sort true number/date fields or year-style integers.

Facets & auto-filled dropdowns

Add data-slater-facets="type,car-brand" to the wrapper (or facets: [...] in config). Any empty <select data-slater-filter> on those fields is filled with the field's options - ordered by how many items match each, computed across the whole collection, and including options that currently match zero items. The match counts follow "drilldown" logic: a field's own selection doesn't shrink its own option list, but other active filters do. (The counts drive the ordering; they aren't printed in the dropdown.)

<div data-slater-list="cars" data-slater-facets="car-brand,year"> … </div>
<select data-slater-filter="car-brand"></select>   <!-- left empty; auto-filled -->

Scoping a page to a subset (base filter)

Config only - add filter to the list's config block. It is applied to every request, scopes the facet counts too, and survives "clear all" (the visitor can't remove it):

lists: {
  blog: {
    filter: { bu: ["commerce"] },   // string or array
    facets: ["categorie", "expertises"]
  }
}

Use a field the visitor can't also control - a base filter and a user filter on the same field combine (AND).

Limits

Filtering is exact-match - no numeric ranges (price from–to) yet.
data-slater-expand does not add filterable fields. A reference still matches on its id, slug or name only - you cannot filter on a custom field of a linked collection. Expansion changes what is rendered, not what is indexed.
Facet labels likewise come from the linked item's name, not from a custom field, even on an expanded list.