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
                  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.
                        portalContainerdocument.bodyThe portal container which will be the container for the combobox's dropdown.