> For the complete documentation index, see [llms.txt](https://docs.overflowcms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overflowcms.com/webflow-integration/filtering-and-sorting.md).

# Filtering & Sorting

## Filtering & Sorting

### Filtering & Sorting

#### Filtering & Sorting

**Pro plan and above for filtering.** Sorting and plain pagination are on every plan. Any `data-oc-list` block can filter and sort its results live, without a page reload — a shopper narrowing a product grid, a visitor picking a blog category, a directory sorted by rating.

**Filtering**

```html
<div data-oc-list="blog" data-oc-limit="12">
  <select data-oc-filter="category">
    <option value="">All categories</option>
    <option value="news">News</option>
    <option value="guides">Guides</option>
  </select>
  <button data-oc-clear-filters>Clear filters</button>

  <div data-oc-item>
    <h3 data-oc-field="title"></h3>
    <div data-oc-field="excerpt"></div>
  </div>
  <div data-oc-empty>No matches.</div>
</div>
```

![A category select filtered to "Migration" and the Title sort-toggle active, both live-updating the list below](https://overflowcms.com/images/docs-screenshots/embed-filter-sort.png)

* **`data-oc-filter="<key>"`** on a `<select>`, `<input>`, or `<input type="checkbox">`/`<input type="radio">` inside the list block. Changing it resets to page 1 and re-fetches — replacing the current items, not appending.
* **`<select>`** — the selected `value` becomes the filter value; an empty `value=""` (an "All" option) clears that filter. A `multiple` select sends every selected option as an "any of these" match.
* **`<input type="checkbox">` / `<input type="radio">`** — checked contributes the filter (its `value`, or `true` if none is set); unchecked removes it. Several checkboxes sharing the same `data-oc-filter` key behave like a multi-select.
* **`<input type="text">` / `"search"` / `"number"`** — debounced about 300ms after typing stops; clearing the input clears the filter.
* **`data-oc-filter-op`** overrides the default comparison (`eq` for select/checkbox/radio, `contains` for free text) with any operator the API supports — `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, `contains`, `in`. For example: `<input data-oc-filter="rating" data-oc-filter-op="gte">`.
* **`[data-oc-clear-filters]`** — any element (usually a button). Clicking it resets every filter control in the block and re-fetches unfiltered.

Only fields marked **indexed** on the collection can be filtered on — see [Collections & Fields](/editor-guide/collections-and-fields.md).

**Sorting**

```html
<div data-oc-list="blog" data-oc-limit="12" data-oc-sort="-publishedDate">
  <button data-oc-sort-toggle="title">Title</button>
  <button data-oc-sort-toggle="rating">Rating</button>

  <select data-oc-sort-select>
    <option value="-publishedDate">Newest first</option>
    <option value="publishedDate">Oldest first</option>
    <option value="-rating">Top rated</option>
  </select>
  <!-- ...data-oc-item / data-oc-empty as usual... -->
</div>
```

* **`data-oc-sort`** on the list block itself still sets the *default* sort shown on load — unchanged from [Embed Script Basics](/webflow-integration/embed-script-basics.md).
* **`data-oc-sort-toggle="<key>"`** — click to sort by that field; click the same one again to reverse direction. The active toggle gets `data-oc-active` and `data-oc-dir="asc"`/`"desc"` attributes, so you can style the pressed state directly in the Designer (e.g. target `[data-oc-sort-toggle][data-oc-active]`) without any JavaScript of your own.
* **`data-oc-sort-select`** — a `<select>` whose option `value`s are raw sort tokens, exactly like `data-oc-sort` (a leading `-` means descending). Picking one overrides the block's default sort.
* A toggle or select click always overrides the container's static `data-oc-sort` once used; reloading the page resets to the static default.

{% hint style="info" %}
While a filter/sort change is fetching, the container gets a `data-oc-loading` attribute — hide or show a spinner with plain CSS, e.g. `[data-oc-loading] .spinner { display: block; }`. A failed request sets `data-oc-error` to the server's actual error code (e.g. `plan_required`) instead of leaving it silently empty, so you can detect and handle it if you want to.
{% endhint %}

**Plan tiers**

Sorting and plain pagination are available on **every plan**. **Filtering** — any `data-oc-filter` control, plus the JSON API's own `search=` parameter on a plain list — requires **Pro or above**. Below that, the API returns `403 plan_required` and the block just leaves the list as-is rather than showing visitors an error (check `data-oc-error` if you need to detect it in your own code). See [Plans & Billing](/plans-and-billing.md).

Full query-parameter syntax and error codes: the API Reference's Collections & Items and Errors pages.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.overflowcms.com/webflow-integration/filtering-and-sorting.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.