SearchInput

StableAccessible

A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords.

Usage

Example

    Assistive text

    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.
    • When no search suggestions are provided and search results are shown on another page, we recommend using a simpler search by using a TextInput component. View in Storybook.

    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.

      Assistive text

      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.

        Assistive text

        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.

        To see highlighting in action, search for "education".
          Assistive text