Search

Search inputs provide a powerful means for users to access content quickly and efficiently.

Many search best practices extend "behind the scenes," such as how query strings are matched to relevant content and to the efficiency in which that information is retrieved.

Placeholder text should only contain the text "Search".

• Provide effective auto-suggestions whenever possible.
• Auto suggestions accelerate search and allow users to focus on task completion.

• Use "live filtering." When results are visible and quick to filter, results should be filtered as the user types.
• Sort results by highest relevance. Relevance can be determined by keyword matching, however, to really elevate user experience, consider implementing probability based approaches.
• Persist users' original query. This eliminates the need to re-type and assists query reformation if needed.
• Persist users' recently used search queries. Remembering the user's previous efforts respects their time and serves as "short cuts" for returning to previously visited content.

Search inputs should be accessible. Ensure users have the ability to return results using their keyboard as well as clicking a button.

Inputs should always be accompanied by labels for accessibility. An icon may serve as a label if:

1. The icon meaning is well understood.
2. Has an 'aria-labelledby' attribute.

For additional detail, see ARIA form hints and 'aria-labelledby'.

Visual and functional extensions for Search.

Suggestions provide users instantaneous feedback as they type, and aid by prompting with common search intents most closely matching the query in progress. Helpful matching functions include root word recognition and predictive text.

Suggested queries should be sorted from highest probability match to lowest. Limit the number of suggested queries displayed to five or less.

Use simple search when its input field is desired to blend with its surrounding content, such as when used in a Header.

The search icon may be placed either to the right or left of the input field. Icon position is controlled via the reverse property.