Search

• Design
• Implementation

General guidelines

Make the input sufficiently wide - allow the search component to be wide enough that users can see as much of their query as possible.

The form field should use a label that is descriptive of what people are searching. The label should be used even if it is hidden because it provides assistance for users with screen readers.

Standard search allows users to search for specific content if they know what search terms to use or cannot find desired content in the main navigation. It can also be used as a filter when trying to find a smaller subset of content.

Discrete search should function like standard search but does not visually distract from the content the user is filtering.

Do not:

• insert text into input to search in the context the component is tied to
• get visual feedback if the search finds no results
• show a type-ahead with possible matches as the user is typing