React SDK

Input

The Input component is used to capture query input via a text field. It can also provide suggestions, typeahead and instant search modes.

Import

Usage

Additional imports used in the examples:

Editable Example
​
Suggestions
    Site search by

    Loading...

    Suggestions

    Editable Example
    ​
    Suggestions
      Site search by

      Loading...

      Redirects

      Editable Example

      Search "google" and hit enter (or select the autocomplete suggestion) to be redirected to google.com.
      Note: you'll be taken away from this page.

      ​
      Suggestions
        Site search by

        Note

        The Input component treats redirects as case-insensitive, meaning the user-inputted value Computer returns the redirect for the query computer and vice versa.

        The component does not support the handling of multiple redirects for queries of the same word with varied letter casing. For example, if you have created redirects for each of the queries computer, Computer, and COMPUTER, only one of them is used (dependent upon your browser).

        Results

        Editable Example
        ​
        Results
          Site search by

          Typeahead

          Editable Example
          ​
          Suggestions
            Site search by

            Loading...

            Standard

            By default <Input /> has an additional mode "instant" and it is also the default value (search on change). To disable it, simple change mode to "standard".

            Editable Example
            &#8203;
            Suggestions
              Site search by

              Loading...

              Existing input element

              If you have an existing input and don't want Input to render another extra input of its own then you can pass in the inputElement prop, this way it will not render its own input and instead will apply all attributes and handlers to the element that you just passed in.

              Editable Example

              Loading...

              Minimum characters

              The minimum characters needed to perform a search request, default is 0. (search on every keystroke)

              Editable Example
              &#8203;
              Suggestions
                Site search by

                Loading...

                Props

                Input component props inherits the input element props with some additional for speech recognition and loading state

                NameTypeDefaultDescription
                mode'standard' | 'typeahead' | 'suggestions' | 'results' | 'instant''standard'The mode of the combobox. 'standard' will operate as a normal text input. 'typeahead' will provide an inline completion suggestion. 'suggestions' will provide an autocomplete menu with options to select. 'results' will perform a full search using the provided term and render full results.
                maxSuggestionsnumberSets how many autocomplete suggestions are shown in the box below the search input.
                retainFiltersbooleanfalseKeep filters when a user performs a new search.
                minimumCharactersnumber0Minimum characters needed to perform a search request.
                disableRedirectsbooleanfalseSearch inptus will navigate to the any configured redirects when the customer submits a matching query. disableRedirects forces the input to perform a standard search instead. This is true by default for results and instant modes to prevent customers from being unexpectedly swept away from the page.

                It also composes the Combobox component a subset of the following props are also valid:

                NameTypeDefaultDescription
                placeholderstring'Search'The placeholder of the input.
                onChange(value: string) => voidThe callback when the input value changes. Note: The event is not passed as the argument.
                onSelect(value: T) => voidThe callback when an item is selected.
                inputElement{ current: HTMLInputElement }Input element to render the combobox in attach mode.
                portalContainerdocument.bodyThe portal container which will be the container for the combobox's dropdown.
                enableVoicebooleanfalseWhether to enable speech recognition (Compatibility table.)
                classNamestring
                showDropdownTipsbooleanfalseWhether to show tips in the dropdown on how to navigate the options.
                showPoweredBybooleantrueWhether to show the "Powered by Search.io" in the dropdown.
                variant'outline' | 'unstyled'outlineThe appearance of the combobox.
                size'sm' | 'md' | 'lg' | 'xl' | '2xl'mdThe size of the combobox.