FilterBar

Usage examples

import { useState } from 'react';
import { Button, FilterBar, FilterChip, SearchInput } from '@rookcom/monarch-react';
import { FilterMenu } from '@rookcom/monarch-react/data';

const STATUSES = ['Open', 'Pending', 'Closed'];

function FullBar() {
  const [query, setQuery] = useState('');
  const [status, setStatus] = useState<string | null>('Open');
  const [owner, setOwner] = useState<string | null>(null);
  const [statusOpen, setStatusOpen] = useState(false);
  const active = [status, owner].filter(Boolean).length;
  return (
    <FilterBar
      landmark
      label="Filter tickets"
      search={
        <SearchInput
          aria-label="Search tickets"
          placeholder="Search tickets"
          size="sm"
          value={query}
          onValueChange={setQuery}
          debounce={250}
        />
      }
      activeCount={active}
      resultCount={`${active ? 18 : 64} results`}
      end={
        <Button size="sm" variant="ghost">
          Newest first
        </Button>
      }
      add={
        <FilterMenu
          options={[
            { value: 'status', label: 'Status', disabled: status !== null },
            { value: 'owner', label: 'Owner', disabled: owner !== null },
          ]}
          onSelect={(v) => {
            if (v === 'status') {
              setStatus('Open');
              setStatusOpen(true);
            } else setOwner('Me');
          }}
        />
      }
      {...(active
        ? {
            onClearAll: () => {
              setStatus(null);
              setOwner(null);
            },
          }
        : {})}
    >
      {status ? (
        <FilterChip
          name="Status"
          value={status}
          open={statusOpen}
          onOpenChange={setStatusOpen}
          onRemove={() => setStatus(null)}
          editor={
            <div style={{ display: 'grid', gap: 4 }}>
              {STATUSES.map((s) => (
                <Button
                  key={s}
                  size="xs"
                  variant={s === status ? 'primary' : 'ghost'}
                  onClick={() => {
                    setStatus(s);
                    setStatusOpen(false);
                  }}
                >
                  {s}
                </Button>
              ))}
            </div>
          }
        />
      ) : null}
      {owner ? <FilterChip name="Owner" value={owner} onRemove={() => setOwner(null)} /> : null}
    </FilterBar>
  );
}

<FullBar />

import { useState } from 'react';
import { FilterBar, FilterChip } from '@rookcom/monarch-react';

function QuickFilters() {
  const [on, setOn] = useState<Record<string, boolean>>({ mine: true });
  const chips = [
    { id: 'mine', name: 'Assigned to me', count: 12 },
    { id: 'unread', name: 'Unread', count: 5 },
    { id: 'vip', name: 'VIP customers', count: 3 },
    { id: 'sla', name: 'SLA at risk', count: 2 },
  ];
  return (
    <FilterBar label="Quick filters" scrollable>
      {chips.map((c) => (
        <FilterChip
          key={c.id}
          name={c.name}
          count={c.count}
          pressed={!!on[c.id]}
          onPressedChange={(p) => setOn((all) => ({ ...all, [c.id]: p }))}
        />
      ))}
    </FilterBar>
  );
}

<QuickFilters />

Purpose

Shows which filters are applied to a list and lets people change them: search, add a filter, edit or remove one, toggle quick filters, or clear everything, with the result count beside it. FilterChip is one filter; FilterMenu is the "Add filter" menu.

Design principles

• Chips show field and value ("Status: Open") so filters read without context.
• The app owns filter state and the filter definitions; FilterBar renders it and reports changes. Pickers (selects, date ranges, people) go in a chip’s editor.
• "Clear all" appears only when the app passes onClearAll.
• Toggle chips use aria-pressed, never colour alone.
• URL state is router-agnostic: readFilterParams / writeFilterParams convert to and from search params.

API reference

import { FilterBar, FilterMenu, defaultFilterBarMessages, readFilterParams, writeFilterParams, FilterChip } from '@rookcom/monarch-react/data';

FilterBar and FilterChip are exported from @rookcom/monarch-react (unchanged) and @rookcom/monarch-react/data; FilterMenu, readFilterParams and writeFilterParams from @rookcom/monarch-react/data.

FilterChip has three modes: removable/read-only (default), editable (editor opens a popover from the name and value), and toggle (pressed, defaultPressed or onPressedChange make the whole chip a pressed button).

They render plain elements and pass native attributes through; no refs are forwarded.

messages translates "2 filters", "Filters (n)", the sheet title and "Done".

Generated from the TypeScript declarations of packages/react/src/patterns/search/filter-bar.

Properties

Variants

States

Interaction behaviour

• The remove button calls onRemove; "Clear all" calls onClearAll.
• Pressing an editable chip opens its editor in a popover; Escape closes it and returns focus to the chip.
• Pressing a toggle chip flips it and calls onPressedChange.
• FilterMenu lists the fields; choosing one calls onSelect (open the new chip’s editor with open).
• resultCount changes are announced politely; debounce search with SearchInput’s debounce.
• Order: search, active count, chips, add control, "Clear all", then result count and end at the trailing edge.

Keyboard support

Accessibility

Role

group, or search with landmark

Accessible name

label, default "Active filters".

• Each remove button is labelled "Remove <name> filter" (removeLabel overrides it).
• Toggle chips are buttons with aria-pressed; their count is part of the name.
• Chip editors are labelled popovers ("Status filter").
• The result count is a status region; the narrow-screen button states how many filters are active.
• Icons are decorative.

Responsive behaviour

• Chips wrap onto new lines by default; the search field shrinks to fit.
• scrollable keeps one swipeable line; collapseBelow moves filters into a bottom sheet on phones.

Theme support

• Chip, pressed, count and focus colours use Monarch semantic tokens, so every theme and contrast mode applies.

Do and don't

Related components

• DataTable: The table the filters narrow; pass filtered for its empty state.
• SavedViews: Saves a filter combination as a named view.
• SearchInput: The debounced search field for the search slot.
• Toolbar: Place the FilterBar in its filters slot.
• Filter Chips (stable): FilterChip registry entry, documented here.
• SegmentedControl: Mutually exclusive choices.

Dependencies

Testing coverage

• Remove buttons are labelled per filter and call onRemove; "Clear all" calls onClearAll; default group name.
• Toggle chips expose aria-pressed and counts, controlled and uncontrolled.
• Editable chip opens a labelled popover and Escape returns focus.
• Search, active count, result status region, trailing slot and landmark role.
• collapseBelow moves filters into a sheet with Clear all and Done; focus returns to the trigger.
• FilterMenu adds a field by keyboard; readFilterParams / writeFilterParams round-trip.

Tests: packages/react/src/patterns/search/filter-bar