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

# FilterFieldForm

## Overview

Renders and controls the filter form for a single filterable field. It hosts
the per-field form state (initial values seeded from the URL query, validation,
and lazy choice fetching) and applies or removes the field's entry in the
shared active-filter list. It is mounted on demand inside the [FilterMenu](/v3/reference/api/vue/FilterMenu.md)
drill-in (to add a filter) and inside a [FilterChip](/v3/reference/api/vue/FilterChip.md) edit
popover (to edit one). The surrounding popover owns visibility; this component
owns the form body and the apply/remove mutations.

Theme entry: [FilterFieldForm](/v3/reference/theming/keys/FilterFieldForm.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-filterName">filterName</span> | `string` | yes |  | Field name this form filters on. |
| <span id="prop-filterDetails">filterDetails</span> | `object` | yes |  | Filter configuration for this field (label, typeFilter, choices, lookupExprs, suffixes). |
| <span id="prop-query">query</span> | `object` |  | `{}` | Current URL query object, used to seed the field value when editing an active filter. |
| <span id="prop-open">open</span> | `boolean` |  | `true` | When true, the form is visible; gates lazy choice fetching for choice fields. |
| <span id="prop-showRemove">showRemove</span> | `boolean` |  | `false` | When true, renders a Remove control beside Apply (used by the chip edit popover). |
| <span id="prop-errored">errored</span> | `boolean` |  | `false` | When true, renders the field in an error state. |

## Slots

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

Scoped slot.

## Events

### `applied` {#event-applied}

### `removed` {#event-removed}

### `hide-filter-form` {#event-hide-filter-form}

## Source

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