# FilterCondition

One controlled filter predicate composed from property, operator and value controls.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, FilterCondition } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <FilterCondition label="Condition 1"
        properties={[{id:"status",label:"Status",options:[{value:"active",label:"Active"},{value:"paused",label:"Paused"}]}]}
        value={{property:"status",operator:"is",values:["active"]}}
        onValueChange={(condition) => console.log(condition)} />
    </FloodRoot>
  );
}
```

## Design notes

- Compose one finite-choice condition from Fieldset, Field, Grid, Select, MultiSelect and IconButton. sm is the default; all controls share controlSize.
- value and onValueChange are controlled. Changing the property proposes an empty values array; changing the operator preserves selected values. Empty values are an incomplete draft, never an instruction to match every record.
- The host owns query evaluation, duplicate-property policy, Apply/Cancel, validation and focus after removing the row. onRemove is optional; no removal slot is reserved when omitted.
- label names the condition group. hideLabel defaults to true; property/operator/value controls retain their accessible names. labels customizes control names, operator text, placeholder and removal text.
- A wide host uses one row with a wider value track. Container-based reflow follows the space available to this row, including inside a popup or drawer. No extra background or border is added.
- This version supports finite enumerated values and is/is-not predicates. Date, text, numeric operators, nested groups, remote fetching and query execution are not part of this component.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `legendSize · 0.2.10` | `"label" \| "section"` | `—` |
| `hideLabel · 0.2.3` | `boolean` | `—` |
| `hint` | `ReactNode` | `—` |
| `error` | `ReactNode` | `—` |
| `message` | `ReactNode` | `—` |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `label` | `string` | `Required` |
| `properties` | `readonly FilterConditionProperty[]` | `Required` |
| `value` | `FilterConditionValue` | `Required` |
| `onValueChange` | `(value: FilterConditionValue) => void` | `Required` |
| `onRemove` | `() => void` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `labels` | `Partial<Record<"property" \| "operator" \| "values" \| "include" \| "exclude" \| "placeholder" \| "remove", string>>` | `—` |
| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "legend" \| "onChange">` | `Forwarded` |