Introduction
Search input fields are essential for users to locate relevant content within a website or application. They are a universal feature, especially in sites with extensive content. Search bars function like form fields, allowing users to input keywords or search queries to generate system outputs.
Usage
Search bars should have a clear placeholder text, most commonly used is the term "Search" to prompt users for their desired queries. It's recommend to be more specific on larger sites, using terms such as “Search for products”.
Always provide a label inside the search input field. This can be either “search” or something more specific to your needs, e.g. “search for entries”
Never display a search field without a label.
Provide user with proper feedback when there are no results for their search queries.
While an error icon can be utilised, always display an additional contextual information.
Display a search field whenever wherever a user can specify the item or content they are looking for.
Avoid using a search field for filtering scenarios where users typically have a general idea of what they're looking for but might not have a specific item in mind.
Also known as
Search field, Search input, Search bar