Skip to main content

CategoryChipRow

Implemented

Single-select event-category chip row (SEARCH-03, Pattern A: one category per event). Owns layout, the aria group and the All semantics; the consumer owns data, i18n and navigation. Selecting the active category or All reports null.

Categorymolecules
Sourcecomponents/molecules/CategoryChipRow/CategoryChipRow.tsx

Catalog fallback

Live MDX preview not available for CategoryChipRow. Showing component catalog metadata instead.

Props

Preview

CategoryChipRow

Prop
Type
Required
Default
Description
categories
CategoryChipOption[]
Required
—

Ordered categories ({ slug, label }).

selected
string | null
Required
—

Active slug, or null for All.

onSelect
(slug: string | null) => void
Required
—

Next slug; null clears the filter.

allLabel
string
Required
—

Label of the clearing All chip.

ariaLabel
string
Optional
"Filter by category"

Accessible name of the chip group.

size
"sm" | "md"
Optional
"sm"

Chip size token.

className
string
Optional
—

Utility class passthrough on the row.

Quick use:<CategoryChipRow />

Accessibility

ARIA rolegroup

ARIA

1 rule

WAI-ARIA group + button pattern

container is role="group" with aria-label; chips are buttons with aria-pressed

behaviour

1 rule

SEARCH-03 AC-3

exactly one chip is pressed; clicking the active one or All clears to null

a11y

1 rule

WCAG 2.5.5

44px tap targets via the Chip atom

Design System v4.1.0 | ePassLive