[Components](https://oods-foundry.com/components) / behavioral

# FilterPanel

Groups filter controls and their explanatory content.

Generated from @oods/foundry 0.10.1

- Categories

  behavioral

- Contexts

  detail, list

- Readiness

  `react-and-vue`

## Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example `filter-panel-batch-mode` : mount, a named Filters region with two legends, a polite 1 active count and an Apply control.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real FilterPanel, live

React

1 active

Status

release_channel

Vue

1 active

Status

release_channel

## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { FilterPanel } from '@oods/components-react';
import '@oods/component-styles/css';

const filters = [
  {
    "field": "status",
    "label": "Status"
  },
  {
    "field": "release_channel"
  }
];

const activeFilters = [
  {
    "field": "status",
    "operator": "eq",
    "value": "active"
  }
];

export function Example() {
  return (
    <FilterPanel
      filters={filters}
      activeFilters={activeFilters}
      mode="batch"
      collapsible={true}
    />
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `filters` | `readonly Readonly<Record<string, unknown>>[] \| undefined` | no | `[{"field":"status","label":"Status"},{"field":"release_channel"}]` |
| `activeFilters` | `readonly Readonly<Record<string, unknown>>[] \| undefined` | no | `[{"field":"status","operator":"eq","value":"active"}]` |
| `mode` | `string \| undefined` | no | `batch` |
| `collapsible` | `boolean \| undefined` | no | `true` |

### Slots

default

### Events

none

## States

immediate, batch, active, empty

## Accessibility

- Role

  `button`

- How it gets its name

  `label` on `button[data-filter-apply]`

### Keyboard

Keyboard

| Key | What it does |
| - | - |
| `Tab` | Move focus to the named native control |

### Obligations in the contract

- A named region (aria-label Filters) wraps the panel
- Each filter descriptor is a fieldset with a visible legend
- The active-filter count is a polite live region

Mirrors renderFilterPanel with data-behavioral=filter and data-filter-mode (default immediate): filters renders one fieldset per record descriptor labelled by label, then field, then Filter; activeFilters renders the polite count with a Clear all control; mode=batch adds an Apply control; collapsible (default true) marks each fieldset data-collapsible. The generic field lowers to filters and activeField to activeFilters; modeParameter, collapsibleParameter and maxActiveParameter are consumed. The Clear all and Apply controls are unwired in the HTML renderer and stay unwired here: the contract declares no events.

## Tokens

The token roles this component reads.

- `filter.background`
- `filter.border`
- `filter.text`
- `filter.legend`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | verified | verified |
| visual themes | verified | verified |

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourFilterPanel>",
  "oodsTraits": [
    "Filterable"
  ],
  "substitution": {
    "component": "FilterPanel",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourFilterPanel>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourFilterPanel>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/filter-panel/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.FilterPanel` `sha256:1a40effef4ac…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios filter-panel-batch-mode` `sha256:dfe0216235f4…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json FilterPanel` `sha256:1a3722ef00da…`
- **React readiness**: `@oods/components-react@0.10.1 readiness FilterPanel` `sha256:637536965e20…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness FilterPanel` `sha256:61e5c57463a5…`
- **Prop types**: `generated/0.10.1/components/prop-types.json FilterPanel` `sha256:5d04dfbe9bb8…`