---
alias: "fc.filterPanel"
aliases:
  - fc.filterPanel
category: filter
module: Core
---
# fc.filterPanel

Collapsible filter panel that generates search/filter UI from data source or config. Connects to `fc.list` to filter results.

## When to Use
- Any list page that needs search/filter functionality
- Paired with `fc.list` for filtered entity lists

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `filtersSource` | string | No | Prefix for auto-detected filter variables from the page query (e.g., `"orders"` matches `orders_status`, `orders_ref`, etc.) |
| `query` | string | No | Custom GraphQL query -- filter fields are extracted from the query's variable definitions instead of the page query |
| `variables` | Record<string, any> | No | Query variables -- supports template strings |
| `noCard` | boolean | No | Remove card styling |
| `overrides` | Record<string, ExtendedFormField> | No | Per-field customization keyed by field name. Supports `inputTemplate`, `outputTemplate`, `label`, `component`, `defaultValue`, `multiple`, `sortPrefix` |
| `exclude` | string[] | No | Hide specific filter fields by name |
| `additionalFields` | MystiqueComponentInstance[] | No | Extra filter field components to append |
| `allowReadWriteUrlParams` | boolean | No | Sync filters with URL query parameters for shareable filtered views |

## Descendants
Yes — typically `fc.list` as a child.

## Gotchas
- **Filter fields are auto-detected from the GraphQL query's variable definitions** -- the panel introspects the page query AST (or custom `query` prop) and generates form fields for each variable matching the `filtersSource` prefix. Pagination variables (`first`, `last`, `before`, `after`, `workflowRef`, `workflowVersion`) are excluded by default
- URL param sync lets users share filtered views via URL
- **`inputTemplate` / `outputTemplate` transform system**: Set via `overrides` per field. `outputTemplate` transforms the field value before sending it as a query variable (e.g., `outputTemplate: '{"ref": "{{value}}"}'` wraps the user input into an object). `inputTemplate` does the reverse when reading from URL params (e.g., `inputTemplate: '{{ref}}'` extracts the ref from a URL param). Templates receive `{{ value }}` (current field value) and `{{ values }}` (all field values)
- `defaultValue` in overrides supports `{{settings.settingName}}` syntax to load initial values from Fluent settings
- Filter field labels are auto-generated from variable names using i18n lookup: `fc.gql.<entity>.<field>.label` -> fallback to capitalized field name

## Manifest Example
```json
{
  "component": "fc.filterPanel",
  "props": { "allowReadWriteUrlParams": true },
  "descendants": [
    { "component": "fc.list", "props": { "dataSource": "orders", "attributes": [] } }
  ]
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
