FilterTags

Context-driven filter chips that automatically display active filters from FilterProvider.

import { FilterTags } from "metricui";

Drop <FilterTags /> anywhere inside a FilterProviderand it automatically shows chips for every active filter. No props required — it reads from FilterContext. Users can dismiss individual filters or clear all at once.

Full Filter Setup

A complete filter bar with PeriodSelector, SegmentToggle, DropdownFilter, and FilterTags. Interact with the controls above — tags appear and disappear automatically.

Period:Last 30 days

Active filter state

preset: 30d

comparison: none

dimensions: {}

import {
  FilterProvider,
  PeriodSelector,
  DropdownFilter,
  SegmentToggle,
  FilterTags,
} from "metricui";

function Dashboard() {
  return (
    <FilterProvider defaultPreset="30d">
      <div className="flex gap-3">
        <PeriodSelector presets={["7d", "30d", "90d"]} comparison />
        <SegmentToggle options={["Daily", "Weekly", "Monthly"]} />
        <DropdownFilter label="Region" options={regions} field="region" multiple showAll />
      </div>
      <FilterTags />
      {/* Tags auto-appear when filters are active */}
    </FilterProvider>
  );
}

Interactive Controls

Experiment with dismissible, clearAll, maxVisible, showPeriod, and showComparison toggles. Select some regions and plans in the dropdowns to see tags appear.

Dismissible

Clear All

Show Period

Show Comparison

maxVisibleall

Period:Last 30 daysComparing:vs previous period

Custom Labels

Override the default field-name labels with custom display names using the labels prop.

Period:Last 30 days

<FilterTags labels={{ region: "Market", plan: "Tier" }} />

Exclude Fields

Hide specific tags with the exclude prop. Use "_period" for the period tag and "_comparison" for the comparison tag.

Period and Plan chips are hidden via exclude={["_period", "plan"]}

<FilterTags exclude={["_period", "plan"]} />

Props

Prop	Type	Default	Description
`exclude`	`string[]`	—	Fields to exclude from display. Use '_period' and '_comparison' for built-in tags.
`include`	`string[]`	—	Whitelist — if set, only these fields show.
`labels`	`Record<string, string>`	—	Custom labels for dimension fields. Default: capitalized field name.
`formatPeriod`	`(range: DateRange, preset: PeriodPreset \| null) => string`	—	Custom period formatter.
`formatDimension`	`(field: string, values: string[]) => string`	—	Custom dimension value formatter.
`dismissible`	`boolean`	`true`	Show dismiss buttons on each chip.
`clearAll`	`boolean`	`true`	Show 'Clear all' button when multiple filters active.
`clearAllLabel`	`string`	`"Clear all"`	Label for the clear all button.
`onClear`	`(field: string) => void`	—	Callback when a specific filter is cleared.
`onClearAll`	`() => void`	—	Callback when all filters are cleared.
`maxVisible`	`number`	`0`	Max visible chips before collapsing. 0 = no limit. Shows '+N more' button.
`showPeriod`	`boolean`	`true`	Show the period filter as a tag.
`showComparison`	`boolean`	`true`	Show the comparison mode as a tag.
`dense`	`boolean`	`false`	Compact mode. Falls back to MetricProvider config.
`className`	`string`	—	Additional CSS class names for the root element.
`classNames`	`{ root?, chip?, clearAll? }`	—	Sub-element class overrides.
`id`	`string`	—	HTML id attribute.
`data-testid`	`string`	—	Test id for testing frameworks.

Notes

FilterTags reads from FilterContext automatically — no manual wiring needed.
It renders nothing when no filters are active.
Period and comparison tags use special keys '_period' and '_comparison' for exclude/include.
Dismiss buttons call clearDimension() / setPeriod() / setComparisonMode() on the FilterContext.
Clear all calls filterContext.clearAll() which resets to the FilterProvider defaults.
maxVisible collapses overflow into a '+N more' button.
Uses forwardRef. Passes through id, data-testid, className, and classNames.
The aiContext prop (inherited from BaseComponentProps) adds business context for AI Insights analysis. See the AI Insights guide for details.