CategoryFilter

molecules

Horizontal scrollable row of category chips — Music, Sports, Comedy, Theater, Festivals, Family. Multi-select for filtering event grids.

ARIA Role: group

Demo

Demo for CategoryFilter (molecules)

Horizontal scrollable row of category chips — Music, Sports, Comedy, Theater, Festivals, Family. Multi-select for filtering event grids.

Props

Prop	Type	Required	Default	Description
`categories`	`Category[]`	Yes	`—`	3-12 categories
`selectedIds`	`string[]`	Yes	`—`
`onSelectionChange`	`(ids: string[]) => void`	Yes	`—`

TypeScript Interface

interface CategoryFilterProps {
  categories: { id: string; label: string; icon?: React.ReactNode; count?: number }[];
  selectedIds: string[];
  onSelectionChange: (ids: string[]) => void;
  showCounts?: boolean;
}

Assertions (NASA Rule 5)

[type]categories bounded 3-12 (NASA Rule 2)(NASA Rule 2)
[aria]role='group' aria-label='Filter by category'(WCAG 1.3.1)

Usage

Import

import { Categoryfilter } from '@epasslive/design-system'

Basic

<Categoryfilter />

With Variants

<Categoryfilter variant="primary" size="md" />