Filters

import { FilterChip, FilterMenu, OperatorList, describeFilterValue } from "@/ui";

These match the Figma ↪ Filters page: Report Chips, Operators, Value Dropdown and Filter Menu. A report shows its filters and groupings as chips. Clicking a filter chip opens a FilterMenu under it, where people pick an operator and a value, then Apply.

Try itCopy Anchor Link

Click a chip to edit it, × to remove it, or add a filter. Apply updates the chip, and Cancel on a new filter drops it.

<FilterChip
  field="Industry"
  operator={filter.operator}
  value={describeFilterValue(filter)}
  selected={open}
  onClick={toggle}
  onRemove={remove}
/>
{open && (
  <FilterMenu field="Industry" type="enum" options={industries} value={filter} onApply={save} onCancel={close} />
)}

ChipsCopy Anchor Link

A filter chip shows a funnel, the field, the operator's symbol and the value in grey. A group chip shows a stacked-cards icon and the field. Hover shows the whole filter in a tooltip, since long values are cut off. The remove button tints and says "Remove" on hover. selected draws a blue border while the chip's menu is open.

<FilterChip field="Industry" operator="equals" value="Technology" onRemove={remove} />
<FilterChip type="group" field="Account Category" onRemove={remove} />

OperatorsCopy Anchor Link

Each data type has its own operators. The list shows a radio, the operator's symbol and its name, and scrolls after five rows.

The symbols are the SVGs from Figma, kept in Filters/icons. Our Phosphor version (2.0.15) does not have the math icons. Equals and is null use Phosphor's Equals and NumberZero.

Filter menuCopy Anchor Link

The field changes with the type and the operator. Pick a field below and try each operator.

Apply stays disabled until the filter is complete. For a number field, anything that is not a number turns the field red and shows "Invalid input. Please enter numbers only."

AnatomyCopy Anchor Link

PropsCopy Anchor Link

FilterChip

FilterMenu

OperatorList: type, value, onChange.

describeFilterValue({ operator, values }) returns the chip text: one or two values joined, "Technology +2" for more, "10000 – 50000" for between, and nothing for is null.

AccessibilityCopy Anchor Link

• The chip is two buttons: the chip itself (aria-expanded while its menu is open) and Remove, labelled with the whole filter.
• The operator button is labelled with the current operator, such as "Operator: in". Lists are listboxes with aria-selected.
• Escape or a click outside closes an open list without closing the menu.
• The number error is announced as an alert.