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
    Powered by

    Loading...

    Suggestions

    Editable Example
    Suggestions
      Powered by

      Loading...

      Results

      Editable Example
      Results
        Powered by

        Typeahead

        Editable Example
        Suggestions
          Powered 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
          Suggestions
            Powered 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
            Suggestions
              Powered 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.

              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.
              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 Sajari" in the dropdown.
              variant'outline' | 'unstyled'outlineThe appearance of the combobox.
              size'sm' | 'md' | 'lg' | 'xl' | '2xl'mdThe size of the combobox.