Search Field
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Live Demo
Actually clickableWhat you just saw:The pill-shaped field with a magnifier at the top of an app home screen, the search bar at the top of an e-commerce search page, the search box that pops up in Mac Spotlight.
What it actually is
A Search Field is a stateful input: it does not just accept text, it also renders results, handles the empty result set, and keeps a search history. What separates it from a plain text field is type-ahead search and the ability to clear.
Anatomy · What it's made of
Search Icon放大镜
16px icon on the left
Input输入区
Light gray background to set it apart from a plain text field
Clear Button清除
An X icon appears once there is text
Results结果列表
Dropdown list, navigable with the arrow keys
Empty State空结果
Offers popular queries or suggestions
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There are more than 30 items and the user knows what they want | Yes |
| Results should appear as the user types | Yes |
| The search space is structured (filter by type or tag) | Yes |
| There are only 5 items and they all fit on screen | No |
| The user cannot articulate what they are looking for (open-ended browsing) | No |
An empty search field must offer popular searches, recent searches, or category entry points — otherwise it is just an empty input.
When there are zero results, you must offer a way out (clear the filters, view everything).
Similar Patterns
Don't mix these upSearch FieldCurrent
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
In one line:An input box built purely for finding things, usually with a magnifier icon and a clear button.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Search Field
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Chip
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a search field: a magnifier on the left, results updating live with a 300ms debounce as the user types, a clear button on the right, and popular-search chips in the empty state.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something people can search with.
Say this instead
Add a Search Field: a magnifier icon on the left, live results with a 300ms debounce, a clear button on the right once there is text, popular-search chips in the empty state, and ↑↓ to move through results.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.