FilterBar

molecules

Horizontal filter bar — search input + filter chips + sort + view toggle. Used on every admin list page.

ARIA Role: search (for input)

Demo

Demo for FilterBar (molecules)

Horizontal filter bar — search input + filter chips + sort + view toggle. Used on every admin list page.

Props

Prop	Type	Required	Default	Description
`onSearch`	`(query: string) => void`	Yes	`—`
`filters`	`FilterConfig[]`	Yes	`—`	0-4 filters

TypeScript Interface

interface FilterBarProps {
  searchPlaceholder?: string;
  onSearch: (query: string) => void;
  filters: { id: string; label: string; options: { value: string; label: string; count?: number }[]; value: string[]; onChange: (v: string[]) => void }[];
  sort?: { value: string; options: { value: string; label: string }[]; onChange: (v: string) => void };
  viewToggle?: { value: 'grid' | 'list'; onChange: (v: 'grid' | 'list') => void };
  primaryAction?: { label: string; onClick: () => void; icon?: React.ReactNode };
}

Assertions (NASA Rule 5)

[type]filters bounded 0-4 (NASA Rule 2)(NASA Rule 2)
[aria]Search uses role='search'; each filter group has role='group' aria-label(WCAG 1.3.1)

Usage

Import

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

Basic

<Filterbar />

With Variants

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