Search field
A search field is an input control that lets users enter queries to find content, items, or features within an app or website.
Philosophy
Search fields provide a direct path to discovery, reducing friction when browsing is inefficient.
They empower users to find content quickly.
They support exploration by surfacing suggestions or filters.
They should feel lightweight, responsive, and unobtrusive.
Anatomy
Variants
Standard
Inline in a form or toolbar.
States
Idle
Empty with label/placeholder visible.
Typing
Query being entered.
Usage tips
Dos
Place search in a consistent, expected location.
Use placeholder text that sets context (e.g., “Search by name, ID”).
Provide autocomplete or suggestions when possible.
Don’ts
Don’t hide the search function if it’s a core task.
Don’t return empty results without guidance (“No results — try fewer keywords”).
Real-world example
