Show a "No results" state instead of an error

Search fields do not have an error state. Search functionality should anticipate spelling mistakes in search queries, and accommodate multiple spellings of words in search results — not treating any search term as an error.

Instead of showing an error, show a "No results" page or a section with any suggestions for how to get results to appear.

Searching versus filtering

In a searching scenario, a user inputs a search term for a specific thing they're looking for. In a filtering scenario, a user generally knows what they're looking for, but may not have a specific thing in mind.

The search field can be used for both of these contexts. For a search experience, use the search field as-is. For a filtering experience, add a filter icon next to the search field, where a user can narrow down their search results before (or instead of) searching using a specific term. Filters can appear below the search field as tags.

Searching within a category

Create a scoped search by pairing a search field with a picker component. Add a picker (either quiet or standard style) where a user can select a topic or category that they would like to search within. It's helpful to also update the search field label to communicate what the user is searching within.

Spectrum previously had a specific "search within" component that would allow a user to filter down a search field category before searching for a particular term. It was deprecated because it did not meet accessibility and localization requirements.

Include a label

Any search field should include a label inside the field, in the default state. The default label text is Search, but this can be customized to be more specific for use cases like scoped search, wayfinding, or building context — acting like a prompt for a user to search more specifically.

Keep in mind that once a search term is entered the label text is no longer viewable. Use help text to show search formatting examples or give hints about what to input. It can be distracting or redundant if the search field label and its help text are both communicating the same thing, so write these thoughtfully.

Follow capitalization rules

The label within the search field should be in sentence case, following Spectrum's UX writing standards for capitalization.