Passer au contenu principal

CategoryFilter

Deprecated

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

Categorymolecules
Sourcepatterns/molecules/categoryfilter.html
AI HintUse for grouped UI patterns. Combine atoms into functional units.

Multi-select category filter.

CategoryFilter

Navigation — Family 5

Multi-select category filter.

Usage

Multi-select category filter. Refer to the DS component index for full prop details.

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

Props

Preview

CategoryFilter

Prop
Type
Required
Default
Description
categories
Category[]
Required
—

3-12 categories

selectedIds
string[]
Required
—
No description.
onSelectionChange
(ids: string[]) => void
Required
—
No description.
Quick use:<CategoryFilter />

Accessibility

ARIA rolegroup

Type

1 rule

NASA Rule 2

categories bounded 3-12 (NASA Rule 2)

ARIA

1 rule

WCAG 1.3.1

role='group' aria-label='Filter by category'

Usage

Import

tsxSnippet
import { CategoryFilter } from "@epasslive/design-system"

Example 1

tsxSnippet
<CategoryFilter />

Example 2

tsxSnippet
<CategoryFilter variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules

Design System v4.1.0 | ePassLive