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

    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 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.
                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.