FilterBuilder

FilterBuilder renders a list of FilterRule entries with field, operator, and value selectors plus an add/remove control. Bring your own state and pass rules + onChange.

#Default usage

<FilterBuilder
  fields={[
    { id: "status", label: "Status", operators: ["is", "is not"], options: [{ label: "Active", value: "active" }, { label: "Archived", value: "archived" }] },
    { id: "owner", label: "Owner" }
  ]}
  rules={[{ id: "rule-1", field: "status", operator: "is", value: "active" }]}
/>

#Import

import { FilterBuilder, type FilterRule } from "@froggdesign/enter-ui-react";

#Accessibility

Each control is a labelled native <select> or <input>; the remove icon button uses aria-label="Remove filter". Field options are surfaced through the native <datalist> API so keyboard users can pick presets while still typing free-text values.

#API

• fields: array of { id, label, operators?, options? }.
• rules: controlled list of FilterRule entries ({ id, field, operator, value }).
• onChange: called with the next rule list.
• addLabel: customise the add button label.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.