Filter Bar

Installation

pnpm add @advui/data

npm install @advui/data

Usage

import { FilterBar, type FilterState } from '@advui/data'

const [filters, setFilters] = useState<FilterState>({})

<FilterBar
  searchable
  filters={[
    {
      key: 'status',
      label: 'Status',
      type: 'select',
      options: [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
      ],
    },
    { key: 'created', label: 'Created', type: 'date-range' },
  ]}
  value={filters}
  onValueChange={setFilters}
  showActiveFilters
  showResetButton
/>

Examples

API reference

Values

Unset is always null: an emptied text field, an empty multi-select, and a range with neither end are reported as null. false is a value, not unset.

Apply, Reset and chips

Filter Bar never fetches or queries: it reports the state, and your app filters its data.

Changing definitions

Accessibility

• The bar is a group named by aria-label ("Filters" by default). Every control keeps its own Tab stop and its own keyboard behavior; Filter Bar adds no arrow-key handling.
• Each filter is a Field: its visible label is linked to the control, or, with showLabels={false}, names it with aria-label. Select, Multi Select, Date Picker and Date Range Picker keep their own roles, states and keyboard support; disabled options are announced as disabled.
• The search field is a named searchbox with its own clear button. Text and date filters get a clear button ("Clear Created") once they have a value; clearing moves focus back to the control.
• Chips sit in a group named "Active filters". Each remove button is named from the chip ("Remove Status: Active"). On web, removing one moves focus to the chip that took its place, or to the bar when none is left.
• The count is text ("2 filters applied"), not a color or a dot. The "More filters" button has aria-expanded and aria-controls, and its name includes the count of active filters behind it.
• A date range that ends before it starts is marked invalid (aria-invalid) with an error linked to the field; it is never swapped. Apply, Reset and Clear are disabled, not hidden, when they would do nothing.
• Nothing is a live region: the controls announce their own changes, so the bar adds no second announcement.

Responsive behavior

In a row, each control has a width from size (wider for multi-select and date-range filters), never wider than the bar, and the search field takes the free space. With wrap (on by default) controls that do not fit move onto new lines, and the actions stay at the end edge. layout="vertical" stacks full-width controls for a side panel or sheet, and layout="responsive" does so below the md breakpoint (768px) and switches to a row above it. Chips wrap. Nothing has a fixed height, so long labels and larger text grow the bar instead of being clipped. For many filters on phones, mark the less used ones advanced and set collapsible.

Platform notes

Related components