---
alias: "fc.page.filter.select"
aliases:
  - fc.page.filter.select
category: layout
module: Core
---
# fc.page.filter.select

Page-level dropdown select that changes a variable on the page GraphQL query, enabling dynamic data filtering.

## When to Use
- Filtering a list page by status, type, or category
- Switching data views on a dashboard (e.g., time period, entity type)
- Any page where the user should be able to select from predefined filter options that alter the page query

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `name` | string | No | Variable name on the GraphQL query (default: `"filter_value"`) |
| `options` | SelectOption[] | **Yes** | Dropdown options array: `[{ label, value }]` |
| `defaultValue` | string | No | Pre-selected value on page load |

### SelectOption
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `label` | string | **Yes** | Human-readable display text |
| `value` | string | **Yes** | Value passed to the GraphQL query variable |

## Data Binding
Sets a variable (named by `name` prop, default `"filter_value"`) on the page-level GraphQL query. The page query must reference this variable for the filter to take effect.

## Descendants
No -- this is a self-contained input component.

## Composition Patterns
- `fc.page` > `fc.page.filter.select` + `fc.list` for filtered list pages
- Multiple `fc.page.filter.select` components for multi-dimension filtering
- Combine with `fc.filterPanel` for advanced filtering setups

## Gotchas
- The `name` prop must match a variable in the page-level GraphQL query -- otherwise the selection has no effect
- `options` is required -- an empty options array renders a blank dropdown
- Default value must match one of the option `value` strings exactly

## Manifest Example
```json
{
  "component": "fc.page",
  "props": {
    "title": "Orders"
  },
  "data": {
    "query": "query ($filter_value: [String]) { orders(status: $filter_value) { edges { node { id ref status } } } }"
  },
  "descendants": [
    {
      "component": "fc.page.filter.select",
      "props": {
        "name": "filter_value",
        "defaultValue": "CREATED",
        "options": [
          { "label": "Created", "value": "CREATED" },
          { "label": "Complete", "value": "COMPLETE" },
          { "label": "All", "value": "" }
        ]
      }
    },
    {
      "component": "fc.list",
      "props": {
        "dataSource": "orders",
        "attributes": [
          { "label": "Ref", "value": "{{node.ref}}" },
          { "label": "Status", "value": "{{node.status}}" }
        ]
      }
    }
  ]
}
```

## 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.
