Skip to main content
Frontend Glossary

UI components · Form input

Filter Bar

Also called: Query filter, Search form, Filter panel, Faceted filters

A row of query conditions above a list or table, like keyword, status, or date range, used to narrow down the data you see.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Add a filter bar above the order list table. In one row, put an "Order ID" input, a "Status" dropdown, and an "Order date" date range, with "Search" and "Reset" buttons on the right. When the conditions take more than one row, collapse them and show an "Expand" link. Sync the selected conditions to the URL parameters so they survive a page refresh, and have Reset restore the defaults.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Filter Bar is what you need.

Use Filter Bar when

  • An admin table or list has lots of data and needs queries that combine several conditions
  • A product or content list needs to be narrowed down quickly by price, brand, category, and so on
  • There are three to eight conditions, and the common ones should always be visible

Pick something else when

  • You only need to search by one keyword; a search box is enough

    Use insteadSearch Box

  • There are only a dozen or so records, easy to see at a glance, so no filtering is needed

  • It holds action buttons like New or Export

    Use insteadToolbar

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Laying out a dozen or more filters, taking up half the screen and pushing the table down

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Filters aren't synced to the URL, so everything is lost after a refresh or when sharing the link

  3. 03

    There's "Search" but no "Reset," and you can't see which conditions are currently applied

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A set of query conditions in a row (inputs, dropdowns, date ranges) plus "Search" and "Reset" buttons, optionally with expand/collapse and tags for the selected conditions.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A filter bar is standard on admin list pages. Above the table sit one or two rows of inputs and dropdowns ("Order ID", "Status", "Order date"), with "Search" and "Reset" buttons on the far right. When there are many conditions, only the first few are shown and the rest are tucked behind "Expand." E-commerce and content sites often use another form: a row of filter buttons with dropdown arrows ("Price", "Brand") that take effect right away when picked, with removable tags like "Selected: Sony ×" shown below.

How it differs from a Search Box: a search box has just one keyword input, while a filter bar combines several conditions. How it differs from a Toolbar: a filter bar decides "which data to look at," and a toolbar decides "what to do with the data." When there are many conditions that are rarely used, put the full set in a Drawer and keep only the two or three most common in the filter bar.

Developer info
Term ID
component-filter-bar
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-pro-query-filter
  • .ant-form-inline
  • .el-form--inline
  • .arco-form-layout-inline
  • .n-form--inline
  • [class*="filter-bar" i]
  • [class*="filterbar" i]
  • [role="search"]:has(select, [role="combobox"])
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026