---
url: "https://vueda.dev/v3/reference/api/vue/FilterGroup.md"
title: "FilterGroup"
---

# FilterGroup

## Overview

Presentation host for a model list view's filter controls. It renders the
add-filter [FilterMenu](/v3/reference/api/vue/FilterMenu.md) (whose trigger teleports into the
toolbar) from the caller-resolved `filterables` / `filterableDetails` /
`validFilterables` and, when filters are active, a strip of removable
[FilterChip](/v3/reference/api/vue/FilterChip.md)s plus a Clear filters control. Resolving
which fields are filterable (typically via
[useViewList](/v3/reference/api/js/use/useViewList/functions/useViewList.md)),
restoring the active-filter list from the URL, mirroring it to query
parameters, and persisting it as a preference are all the caller's
responsibility; this component only renders the `v-model` list and threads
add/edit/remove edits back through it.

Theme entry: [FilterGroup](/v3/reference/theming/keys/FilterGroup.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-app">app</span> | `string` | yes |  | Django app label. Not used to discover filterable fields (see `filterables` below); used for field/widget component override resolution and passed to descendants (e.g. `FilterFieldForm`) for choice-value fetching. |
| <span id="prop-model">model</span> | `string` | yes |  | Django model name. See `app` above for what this is (and isn't) used for. |
| <span id="prop-view">view</span> | `string` | yes |  | View name, forwarded the same way as `app`/`model`. |
| <span id="prop-filterables">filterables</span> | `array` | yes |  | Resolved filterable field names for this app/model/view (e.g. `useViewList`'s `filter.filterables`), including fields with no usable filter type or that are server-hidden. `FilterGroup` does not fetch, merge, or recompute this itself. |
| <span id="prop-filterableDetails">filterableDetails</span> | `object` | yes |  | Resolved per-field filter details (e.g. `useViewList`'s `filter.filterableDetails`). |
| <span id="prop-validFilterables">validFilterables</span> | `array` | yes |  | `filterables` narrowed to non-hidden fields the client can render an editable input for (e.g. `useViewList`'s `filter.validFilterables`); the field list rendered as addable/editable. |
| <span id="prop-errored">errored</span> | `boolean` |  | `false` | When true, the filter group is in an error state, enabling error display. |
| <span id="prop-error">error</span> | `object` |  | `null` | Error object to display; only rendered when it is a `ListFilterError` instance. |
| <span id="prop-triggerTarget">triggerTarget</span> | `object\|string` |  | `null` | Element (or selector) in the host toolbar that the add-filter trigger teleports into. |
| <span id="prop-hosted">hosted</span> | `boolean` |  | `false` | When true, the chips render as a bare subgroup (no band chrome) for hosting inside a shared [ConstraintsBar](/v3/reference/api/vue/ConstraintsBar.md); the group keeps its own Clear filters control. When false (default), the chips render as a self-contained strip. |

## Slots

### `slotName` {#slot-slotName}

Scoped slot.

### `filter-group-error-display` {#slot-filter-group-error-display}

Slot.

## Events

| Name | Description |
| --- | --- |
| `hide-filter-form` | Forwarded from the add-filter menu or a filter chip's edit popover when it should close. |

[Full event reference](/v3/reference/api/vue/FilterGroup/events.md)

## Source

`client/lib/form/filter/FilterGroup.vue`