Filters that stay out of the way

The problem

Filters hidden in a drawer or a sidebar are easy to forget. People see an empty or short list and assume the data is missing, not that a filter from last week is still on.

When to use it

Use it for

Lists and tables with more than a screenful of results.
Three to eight common filters. Put rarely used ones in a Drawer.

Not for

Fewer than about 20 results: a search field is enough.
One mutually exclusive choice, such as a time range: use a SegmentedControl.

Anatomy

Count“3 filters active”, in a polite live region so changes are announced.
ChipsOne FilterChip per filter. Selected chips show their value and turn off with one press.
Dropdown chipA chip with hasDropdown for multi-value filters, such as department.
More filtersA button that opens a Drawer for the long tail.
Clear allAppears once two or more filters are on.

How to build it

Put the chips directly above the results, never in a separate panel.
Use a plain FilterChip for on/off filters and hasDropdown with selectionMode for multi-value ones.
Show the active count in a polite live region.
Keep filters in the URL so a shared or reloaded link shows the same list.
When filters return nothing, say which filters and offer to clear them.

app.tsx

import { FilterChip, MenuItem } from "@nexera-ui/react";

<div className="flex flex-wrap gap-2">
  <FilterChip label="On leave" isSelected={onLeave} onChange={setOnLeave} />
  <FilterChip
    label="Department"
    hasDropdown
    selectionMode="multiple"
    selectedKeys={departments}
    onSelectionChange={setDepartments}
  >
    <MenuItem id="eng" label="Engineering" />
    <MenuItem id="design" label="Design" />
  </FilterChip>
</div>
<p aria-live="polite">{activeCount} filters active</p>

Accessibility

Keyboard support
Key	Action
`Tab`	Moves between chips.
`Space / Enter`	Turns a chip on or off, or opens its menu.
`Arrow keys`	Move through the options of a dropdown chip.

Each chip is a toggle button with aria-pressed, so its state is read out.
Announce the result count after a change, not every keystroke.
Chip labels are the filter values, not just colours or icons.

Do and don't

DoShow active filters as chips you can turn off above the results.

Don'tHide the active filter count inside a closed drawer.

DoPut the filters in the URL.

Don'tLose every filter when someone opens a row and comes back.

DoTell people which filter emptied the list and offer to clear it.

Don'tShow “No results” with no way out.