Skip to main contentCarbon Design System

Search

Search is an essential pattern for navigation or discovery. We live in the age of search, where a search engine is often the primary entry point into the internet. User expectations are high for the way search should work, and consistency is critical.

Overview

Searching is an intuitive method of discovery, offering users a way to explore a website or application using keywords. Most searches begin broad, with the scope narrowing as filters are applied.

The method of search you use depends on the size of the data set being searched and the location of the search within your product.

The placement of your search field depends on the construction of your application and the scope of the search. For global searches, see the global header pattern for placement guidance. See the data table component for search placement within a data table.

Anatomy

Anatomy of a basic search
  1. Scope filter (optional): The optional scoped search allows users to limit their searches to a section or category of content on a website.
  2. Search icon: Signifies a search field. The magnifying glass icon is a universal way to indicate search.
  3. Placeholder text: Useful and short text hinting at what the user can search for. For example, “Search for networks or devices.”
  4. Text entry field: The place where a user enters their search query.

Types of search

TypeWhen to useUse cases
Basic search
When a user will conduct a search and be routed to a distinct results page.
Global searches, or any search that routes users to a distinct results page
Active search
Best for small data sets, like a single page, website, or table. When a user will benefit from constant feedback based on their search query, and when the server can handle a substantial search query load.
Actively searches a database and lists the top results in results panel or on the current page. For example:
    — Searching a catalog
    — Searching a small website
    — Searching a small data set within a table
    — Searching a subset of information embedded within a product or application’s page
Focused search
When the search is focused on tasks or information specific to the active user. Limits server load by focusing search scope while offering the power of a broad, basic search.
    — Assigned tasks
    — Product catalogs
    — Personal repositories
    — Work created by the active user

Best practices

Avoid dead ends

If a search returns “No results”, suggest a follow-up action. Provide suggestions and helpful resources to aid the user in finding what they are looking for. For more on no results for searches, see the empty states pattern.

Include a loading indicator

If the search will take longer than a moment or two, include a loading indicator. Your loading state should reflect your empty state with useful helper text signaling that the search is still ongoing. Include a progress bar for advanced, resource-intensive searches. Let the user know how far along the search is, and roughly how long it will take to finish.

Display the number of results

Always include the number of search results, including for searches with no results. If you plan to offer a scope filter, also include the number of results for each scope selector.

Don’t include a label

Avoid adding a label to your search field. Users expect and understand search fields, and no label is necessary. A search icon along with useful placeholder text should clearly indicate that the field is intended for search.

Provide useful placeholder text and include a search icon

Provide useful placeholder text and include a search icon.

Don’t include a label for search fields.

Don’t include a label for search fields.

Localize the search field

For languages that read right to left, flip the layout of the search box as shown in the next example.