How to build an accessible Filter in React

Wraps buttons in a role="group" so screen readers announce the group label; each button uses aria-pressed to communicate selected state without relying on color alone

When to use a Filter

• Tag or category filtering on listing pages where the active filters must remain visible
• Facet chips that toggle content visibility (e.g. product categories, team labels)

When not to use it

• Navigation between distinct views — use Tabs
• A binary on/off switch — use Toggle
• Form field for selecting a value — use Select or Checkbox

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space

Common mistakes

Avoid: <Filter options={statusOptions} onChange={navigate} />

Prefer: <Tabs items={statusTabs} />

Filter is for narrowing visible content, not routing between views

Example

<Filter
  options={[
    { label: 'All', value: 'all' },
    { label: 'Active', value: 'active' },
    { label: 'Archived', value: 'archived' },
  ]}
  aria-label="Filter by status"
/>

See the full Filter reference →