Library / Interaction & UX patterns / Search and filter
No. 038·noun·also called filtering, faceted search, filter bar

Search and filter

Narrowing a long list by typing words or picking criteria, like status, date, or price.

SPECIMEN · LIVE DEMO
Definition

What it is

Search narrows a list by text you type; filters narrow it by picking criteria (status: Open, price under $50). Together they're how people find things in lists bigger than a screen.

Decide whether results update as you type (live search) or only after pressing Enter, whether filters combine (Open AND assigned to me), and whether active filters appear as removable chips. Keeping filters in the URL lets people share and bookmark a filtered view.

Always design the "no results" empty state.

Say it like a builder

How to ask for it

Vague

“Let people find orders easier.”

Precise

“Add search and filters to the orders list: a search box that filters by customer name or order number as you type, plus Status and Date range filters shown as removable chips. Keep them in the URL, and show an empty state when nothing matches.”

Why it works

"Find easier" is a goal; naming search and filters and listing the criteria, behavior, and empty state is a buildable spec.

In the wild

You've seen this in

  • AAirbnb's price and amenity filters
  • LLinear's filter bar
  • YSearching contacts on your phone
Usage note

Often confused with