FilterChipGroup

Usage

FilterChipGroup is a controlled component — the parent owns selectedIds and reacts to onChange. Pick the mode by shape of the filter: several facets at once (categories) uses the default multi; exactly-one filters (date ranges, A–Z indexes) pass multi={false}. Always pass a localized ariaLabel.

import { useState } from 'react'
import { FilterChipGroup } from '@epasslive/design-system'

const RANGES = [
  { id: 'today', label: 'Today' },
  { id: 'week', label: 'This week' },
  { id: 'month', label: 'This month' },
  { id: 'all', label: 'All time' },
]

const [range, setRange] = useState(['week'])

// Single-select date range (radio semantics — RevenueReport's shape):
<FilterChipGroup
  options={RANGES}
  selectedIds={range}
  onChange={setRange}
  multi={false}
  ariaLabel={t('ranges.ariaLabel')}
/>

// Multi-select category facets (additive toggle):
const [categories, setCategories] = useState(['concerts', 'festivals'])

<FilterChipGroup
  options={CATEGORIES}
  selectedIds={categories}
  onChange={setCategories}
  ariaLabel={t('categoriesAriaLabel')}
/>

Accessibility

• Container exposes role="group" with an accessible name (ariaLabel); each chip is a native <button type="button" aria-pressed> rendered by the Chip atom — Enter/Space activation and tab focus come free, with a visible focus-visible ring.
• Arrow-key navigation is deliberately not implemented: the group follows the WAI-ARIA APG toggle-buttons-in-a-group pattern (not listbox/toolbar), where roving tabindex is not required. Chips wrap with flex flex-wrap gap-2; long rows (A–Z) are tabbed through.
• With showCount, the count folds into the chip's accessible name ("Festivals, 15 results"). The container's data-selected-count attribute is for styling and tests — it is not announced.
• Tap targets are ≥44px tall (--ep-tap-min) in both sizes (WCAG 2.5.8 AA passes with room). Known gap: single-letter chips can be narrower than 44px — a WCAG 2.5.5 AAA width item tracked on the Chip atom.
• Selected chips use the theme-stable selected-control idiom (--ep-btn-primary-bg + --ep-text-inverse, 5.70:1) verified in light and dark themes; unselected chips use --ep-bg-3/--ep-border/--ep-text-body with dark overrides and a --ep-teal hover border.

i18n status

Honest state as of 2026-08-28 — the molecule renders English fallbacks and has no formatter props yet:

• The ariaLabel default "Filters" is an English fallback. Pass a localized label at every call site (t("ranges.ariaLabel"), t("alphaAriaLabel") — the established key families).
• The showCount plural suffix ("result"/"results") is English-only with no escape hatch — a latent leak: no storefront consumer passes showCount today. A countLabel formatter prop is the planned fix.
• Pending consumer leaks (cascade step 6, not yet fixed): ProducerProfilesTable passes a literal "A-Z filter" (and is also missing multi={false}); TableToolbar exposes filtersLabel (landed, molecules 31-45) — its 4 filter-using consumers pass localized labels.

Props