FilterBuilder

FilterBuilder combines field, operator, and value controls with add and remove actions. Keep the rules in state and pass onChange so every control updates the current filters.

#Default usage

"use client";

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

export function FilterBuilderExample() {
  const [rules, setRules] = useState<FilterRule[]>([
    { id: "status", field: "status", operator: "is", value: "active" },
  ]);

  return (
    <FilterBuilder
      fields={[
        {
          id: "status",
          label: "Status",
          operators: ["is", "is not"],
          options: [
            { label: "Active", value: "active" },
            { label: "Archived", value: "archived" },
          ],
        },
        { id: "owner", label: "Owner", operators: ["is", "is not"] },
      ]}
      rules={rules}
      onChange={setRules}
    />
  );
}

#Import

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

#Responsive behavior

A rule stays on one row when enough space is available. Field, operator, value, and remove controls wrap in their reading order when the container becomes narrow. This works inside a desktop side panel as well as on a phone, without a consumer media query or styling override. Controls can shrink within their available width; value fields keep the remaining row space beside the remove action.

#Accessibility

Field and operator controls use EnterUI Select with labelled triggers and keyboard navigation. Value is a labelled text input; optional presets use a native datalist while allowing free text. The remove button is named "Remove filter". Tab order follows the visual control order after wrapping, and focus remains visible.

#API

The component also accepts native div attributes. Use stable, unique rule IDs when persisting filters.

#Styling

FilterBuilder owns its responsive layout, token colors, control spacing, and focus treatment. Compose it through the documented props; no custom CSS or style/className overrides are needed.