UI components · Form input
Search Box
Also called: Search bar, Search input, Search field, SearchInput
An input with a magnifying glass icon. Type keywords and press Enter or click the search button to find content on the page, in a list, or across the site.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAbove the order list on the left, add a 280px-wide search box with a magnifying glass icon on the left and the placeholder "Search order ID or customer name." Search automatically after a 300ms pause in typing, and immediately on Enter. When there's text, show a clear button on the right that restores the full list. When nothing matches, show "No matching orders found."
Send to
01Decide
Does your content look like this?
Check both columns to confirm Search Box is what you need.
Use Search Box when
- Lists or tables with lots of data, where users need to quickly find a few records by keyword
- Site-wide search at the top of a website or app, for finding articles, products, or docs
- When there are hundreds or thousands of items and users type a keyword before choosing
Pick something else when
Content users fill in to submit and save, like a name or address. Use a regular input.
Use insteadInputA list of a dozen or so items that fits on one screen. No need for a search box.
Filtering by several combined conditions like status, date, and category. Use a filter bar, with the search box as just one part of it.
Use insteadFilter Bar
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.
- 01
Sending a request on every keystroke with no debounce, which loads the server and makes results flicker
- 02
Not saying which fields are searchable, so users type a customer name when only order IDs are supported
- 03
Showing a blank area when there are no results, so users think the page is broken
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 magnifying glass icon, a keyword input area, and a clear button. Sometimes there's a separate search button on the right, and a suggestions list can drop down below.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A search box is an Input made for "finding things." It has a magnifying glass icon on the left or right and placeholder text that says what you can search, like "Search order ID or customer name." It triggers on Enter or a search button click, and once there's text, an × for clearing appears on the right. It usually lives in one of two places: site-wide search in the top navbar, or above a list or table to search only the current data.
The difference from a regular input is purpose. What you type in a regular input gets submitted and saved, while a search box's text is just a query. A search box can search as you type. In that case, add a Debounce so it doesn't send a request on every keystroke. It can also show suggestions and history, which is Autocomplete. When there are no results, say so clearly instead of showing a blank area.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-search-box- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
input[type="search"][role="search"][role="searchbox"].ant-input-search.arco-input-searchinput[placeholder*="搜索"]input[placeholder*="search" i]
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026