Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputPrinciplesAccessibilityUsage and variationsDemos & APISelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Search input

DraftAccessible

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

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.

Accessibility

  • Provide descriptive aria labels for the search and clear buttons.
  • If loading suggestions takes a while, the implementation automatically includes a loading spinner. In this case, remember to provide labels for both the loading and loading finished event.

Usage and variations

Search input

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

    Core code example:

    <div class="hds-search-input">
    <label for="example" class="hds-search-input__label">Search</label>
    <div class="hds-search-input__input-wrapper">
    <input
    id="example"
    class="hds-search-input__input"
    type="text"
    />
    <div class="hds-search-input__buttons">
    <button
    type="button"
    aria-label="Search"
    class="hds-search-input__button"
    >
    <i class="hds-icon hds-icon--search hds-icon--size-s" aria-hidden="true"></i>
    </div>
    </div>
    <span class="hds-search-input__helper-text">Assistive text</span>
    </div>

    React code example:

    <SearchInput
    label="Search"
    helperText="Assistive text"
    searchButtonAriaLabel="Search"
    clearButtonAriaLabel="Clear search field"
    onSubmit={submittedValue => console.log('Submitted value:', submittedValue)}
    />

    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.

      Assistive text

      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

        React code example:

        {() => {
        const fruits = ['Apple', 'Apricot', 'Avocado', 'Banana', 'Blackberry', 'Blueberry', 'Cherry', 'Coconut', 'Cranberry', 'Date', 'Dragonfruit', 'Fig', 'Gooseberry', 'Grape', 'Honeyberry', 'Jackfruit', 'Kiwifruit', 'Lemon', 'Lime', 'Mango', 'Melon', 'Nectarine', 'Orange', 'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Pineapple', 'Raspberry', 'Satsuma', 'Start fruit', 'Strawberry', 'Tangelo', 'Tomato'].map((fruit) => ({ value: fruit }));
        const getSuggestions = (inputValue) => new Promise((resolve, reject) => {
        const filteredItems = fruits.filter((fruit) => {
        return fruit.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
        });
        resolve(filteredItems);
        });
        return (
        <SearchInput
        label="Search for a fruit"
        helperText="Assistive text"
        searchButtonAriaLabel="Search"
        clearButtonAriaLabel="Clear search field"
        suggestionLabelField="value"
        getSuggestions={getSuggestions}
        onSubmit={submittedValue => console.log('Submitted value:', submittedValue)}
        />
        );
        }}

        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

          React code example:

          {() => {
          const educations = ['Daycare eduation', 'Preschool education', 'Basic education', 'Upper secondary education', 'Vocational education', 'Polytechnic education', 'University education', 'Adult education centre'].map((education) => ({ value: education }));
          const getSuggestions = (inputValue) => new Promise((resolve, reject) => {
          const filteredItems = educations.filter((education) => {
          return education.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
          });
          resolve(filteredItems);
          });
          return (
          <SearchInput
          label="Search education services"
          helperText="Assistive text"
          searchButtonAriaLabel="Search"
          clearButtonAriaLabel="Clear search field"
          highlightSuggestions
          suggestionLabelField="value"
          getSuggestions={getSuggestions}
          onSubmit={submittedValue => console.log('Submitted value:', submittedValue)}
          />
          );
          }}

          Demos & API

          Core

          Search input in hds-core

          React

          Search input in hds-react

          SearchInput API