FilterCondition

Use FilterCondition

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

"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