# Dynamic Filters

Adds a single configurable filter to the catalog. Each Dynamic Filters block is one filter (text input, checkbox group, radio, range slider, or boolean toggle). Drop multiple instances into a sidebar slot to build a full filter panel.

> **Note on naming:** The palette label is **Catalog Filter**. The underlying file is `DynamicFilters` / `CatalogFilter`.

## Available in

* Catalog modules
* Public Page modules

## When to use

* Whenever your catalog has filterable attributes (size, colour, brand, price range, in-stock, etc.).
* Pair multiple instances in a sidebar slot — one block per attribute.
* For text-search across all products, use the **Catalog Display**'s search field instead — Dynamic Filters is for attribute filtering.

## Settings

| Setting                         | Description                                                                                    |
| ------------------------------- | ---------------------------------------------------------------------------------------------- |
| **Filter Configuration**        | Opens the configuration modal — field, type, label, options, scope.                            |
| **Filter Value (Auto-managed)** | Read-only display showing the current filter value at runtime — auto-managed by the app store. |
| **CSS Classes**                 | Additional CSS classes for styling.                                                            |

The Filter Configuration modal supports:

* **Field** — the NetSuite item field this filter targets (e.g. `displayname`, `custitem_color`).
* **Type** — text, checkbox, radio, range, or boolean.
* **Label** — text shown above the filter.
* **Placeholder** — hint text for input-style filters.
* **Options** — list of values for checkbox / radio (or auto-populate from catalog values).
* **Enabled** — quick disable without removing the block.
* **Category IDs** — restrict the filter to specific categories (empty = all).
* **Is Global** — apply across all categories (default Yes) or per-category (No, then specify Category IDs).

## How it works

1. On mount, the block registers its FilterConfig with the app store under `activeFilters.dynamic[field]`.
2. The user interacts with the filter; the value is written to the store.
3. **Catalog Display** reads `activeFilters` and re-fetches or re-renders to match.
4. On unmount, the block deregisters its filter so stale state doesn't leak.

The block also supports two advanced options:

* **`isUseCatalogValues`** — populate the option list from values that actually appear in the current catalog items (avoids showing options that match nothing).
* **`isFilterByFilterResults`** — narrow this filter's options based on what's left after other filters have been applied.

Filter search styling has been updated — the text input for text-type filters now has a cleaner search appearance with improved contrast for dark mode and smaller screens.

{% hint style="info" %}
For a clean filter sidebar, drop one Dynamic Filters block per attribute, label them clearly, and set `isUseCatalogValues` to Yes — that way users only see options that match actual products.
{% endhint %}

## Examples

**Brand + size + colour panel.** Three Dynamic Filters blocks in the Right slot of Catalog Layout — one for brand (checkbox), one for size (checkbox), one for colour (radio with swatches).

**Price range slider.** A Dynamic Filters block with Type = range, Field = `price`. Users drag handles to narrow by price.

**In-stock toggle.** A Dynamic Filters block with Type = boolean, Label = *In stock only*. A single toggle that filters out out-of-stock items.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Catalog Display</strong></td><td>The block that filters its items based on the active filters.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Category Sidebar</strong></td><td>For filtering by category hierarchy.</td><td><a href="/pages/iHgOoEc4CBkQG9A3oaPT">/pages/iHgOoEc4CBkQG9A3oaPT</a></td></tr><tr><td><strong>Catalog Layout</strong></td><td>The shell where filter blocks usually live.</td><td><a href="/pages/a2TAHif0CxZaVsEtwolU">/pages/a2TAHif0CxZaVsEtwolU</a></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/catalog-components/dynamic-filters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.