React SDK

Combobox

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

Import

Usage

Editable Example
Suggestions
    Powered by

    Variants

    The compobox component comes in 2 variants: outline and unstyled. Pass the variant prop and set it to one of these values.

    Editable Example
    Suggestions
      Powered by
      Suggestions
        Powered by

        Sizes

        Use the size prop to set the size of the combobox. The default is md.

        Editable Example
        Suggestions
          Powered by
          Suggestions
            Powered by
            Suggestions
              Powered by
              Suggestions
                Powered by

                Suggestions mode

                Set the mode prop to suggestions to render autocomplete suggstions.

                Editable Example

                Current query:

                Current value:

                Suggestions
                • apple ipad
                • apple ipod
                • apple imac
                • apple iphone
                • apple mac mini
                • apple mac pro
                • apple macbook pro
                • apple pro xdr
                • apple tv
                • apple watch
                Powered by

                Results mode

                Editable Example
                Results
                Powered by

                Typeahead mode

                Set the mode prop to typeahead to render a typeahead suggestion.

                Editable Example
                Suggestions
                  Powered by

                  Loading

                  Editable Example
                  Suggestions
                    Powered by

                    Speech recognition

                    Editable Example
                    Suggestions
                      Powered by

                      Props

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

                      NameTypeDefaultDescription
                      mode'standard' | 'typeahead' | 'suggestions' | 'results''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.
                      loadingbooleanfalseShow the spinner icon.
                      enableVoicebooleanfalseWhether to enable speech recognition (Compatibility table.)
                      autoFocusbooleanfalseAutomatically get focus when the page loads.
                      captureVoiceInputbooleantrueWhether to set the combobox value to the voice input, if enabled.
                      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.
                      onVoiceInput(value: string) => voidThe callback when a voice transcript is output.
                      itemsstring[]An array of strings to use for autocomplete suggestions.
                      completionstringA string to use for a typeahead value.
                      itemToString(item:T) => stringA callback to convert item (object) to string.
                      itemToUrl(item:T) => stringA callback to get/compute url from item object for results mode.
                      renderItem(params) => React.ReactNodeA render prop function for customizing result item view.
                      size'sm' | 'md' | 'lg' | 'xl' | '2xl'mdThe size of the combobox.
                      variant'outline' | 'unstyled'outlineThe appearance of the combobox.
                      showDropdownTipsbooleanfalseWhether to show tips in the dropdown on how to navigate the options.
                      showPoweredBybooleantrueWhether to show the "Powered by Sajari" in the dropdown.
                      inputElement{ current: HTMLInputElement }Input element to render the combobox in attach mode.