Filter toolbar

In FORMA

• Liegt in kit/arc/filter-toolbar und ist über @/forma/arc/filter-toolbar/filter-toolbar erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Faceted filtering above tables and lists, with removable chips.
• Adding filters through a two step field then value menu.
• Views that pair with sortable-data-table and pagination for a full list page.

When not to use

• Use chip-group for a fixed set of toggles.
• Use search-field for free text search.
• Use multi-select when one field takes several values in a form.

Usage

import { useState } from "react";
import { FilterToolbar, type FilterChip } from "@/forma/arc/filter-toolbar/filter-toolbar";

const fields = [
  { id: "status", label: "Status", options: ["Open", "Closed"] },
  { id: "owner", label: "Owner", options: ["Maya", "Leo"] },
];

export function IssueFilters() {
  const [filters, setFilters] = useState<FilterChip[]>([]);
  return (
    <FilterToolbar
      filters={filters}
      onRemove={id => setFilters(f => f.filter(x => x.id !== id))}
      onClearAll={() => setFilters([])}
      addFilter={{ fields, onAdd: chip => setFilters(f => [...f.filter(x => x.id !== chip.id), chip]) }}
    />
  );
}

API reference

FilterToolbar

A row of removable filter chips with Clear all and an optional Add filter menu.

FilterMenu

The Add filter trigger and its two step menu, usable on its own.

Keyboard interactions

Accessibility

• The toolbar is role="group"; the menu panel is a labelled role="dialog" holding a role="menu" of checkable items.
• Remove buttons are labelled like "Remove Status: Open", and removing a chip moves focus to its neighbor or the Add filter trigger.
• Additions and removals are announced through a role="status" region.

Motion

• Chips open and close their slot on a spring so neighbors glide; values morph in place.
• The Add filter trigger morphs into the menu surface and steps slide between fields and values.
• Reduced motion replaces the morphs and slides with instant changes and short fades.

Responsive behavior

• Below 520px the toolbar stacks into a column with actions aligned to the end.
• The menu panel is min(16rem, 100vw minus a gutter) wide, flips its edge when there is no room, and its list caps at min(20rem, 55vh).
• Hover highlights apply only on hover-capable fine pointers.

Performance

• Several ResizeObservers measure chips and the menu for morphs; menu options are not virtualized, so keep value lists short.

Notes for AI

• Use above tables and lists for faceted filtering. Use chip-group for a fixed set of toggles and search-field for free text.
• Keep one chip per field: onAdd receives a chip keyed by field id, so replace any existing chip with that id.
• Pair with sortable-data-table and pagination for a full list view.

Related

• Sortable data table: Compare structured records with sortable columns.
• Chip group: Filter by a few facets with chips that morph as you pick them.
• Search field: A recognizable search entry point with clear affordances.
• Multi-select: Select several values while keeping the field readable.
• Pagination: Move through a long collection with clear bounds.

Also in tables

• Tree view: Navigate nested folders and structured content.
• Reorderable list: Organize items with direct drag and drop.
• Code block: Present code with legible hierarchy and copy access.
• JSON viewer: A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Guidance for AI tools

Filter toolbar: Keep collection filters close and easy to reset. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt