SearchInput

Usage

Example

Principles

• A label should always be provided with a search input. Only exception to this is when search input is used in navigation.
  • Make sure that the label is clear and concise. The user should immediately understand what the search is for.
  • Instead of a label, you may provide a button next to the input which states the purpose of the search.
• Search field input should fit into one line. Do not use multiline search inputs.
• It is recommended to have only one search per page. If you need multiple searches, clearly label them to indicate their purpose.
• If possible, provide search suggestions (see With suggestions section for more info). This helps users to find what they are looking for, especially if the searchable items are complex.
  • Do not use suggestions to present search results. Results should be provided in their own component or a separate page.

Variations

Default

The basic version of the search input is a plain text field with search and clear buttons. The search button will initiate the search with the current text input.

With suggestions

If available, suggestions can also be included with the HDS search input. Suggestions are generated by a project supplied function which means it is up to the project to choose how and where the suggestions are made.

When fetching suggestions is taking longer than 1.5 seconds, a loading spinner will be displayed below the input until suggestions are received.

With suggestions and highlighting

HDS search input also supports suggestion highlighting. This means that the suggestion not part of the initial search keyword is highlighted. In some cases this can be beneficial to the user to differentiate between search suggestions.

Suggestion highlighting is activated with highlightSuggestions property and it becomes visible after at least three characters are typed into the input.

Note! This feature is experimental and we are looking to improve it after project feedback.