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
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
​
Suggestions
Sizes
Use the size
prop to set the size of the combobox. The default is md
.
Editable Example
​
Suggestions
​
Suggestions
​
Suggestions
​
Suggestions
​
Suggestions
Suggestions mode
Set the mode
prop to suggestions
to render autocomplete suggstions.
Editable Example
Current query:
Current value:
Results mode
Editable Example
​
Results
Typeahead mode
Set the mode
prop to typeahead
to render a typeahead suggestion.
Editable Example
apple iphone
Suggestions
Loading
Editable Example
​
Suggestions
Speech recognition
Editable Example
​
Suggestions
Props
Combobox
component props inherits the input
element props with some additional for speech recognition and loading state
Name | Type | Default | Description |
---|---|---|---|
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. |
loading | boolean | false | Show the spinner icon. |
enableVoice | boolean | false | Whether to enable speech recognition (Compatibility table.) |
autoFocus | boolean | false | Automatically get focus when the page loads. |
captureVoiceInput | boolean | true | Whether to set the combobox value to the voice input, if enabled. |
onChange | (value: string) => void | The callback when the input value changes. Note: The event is not passed as the argument. | |
onSelect | (value: T) => void | The callback when an item is selected. | |
onVoiceInput | (value: string) => void | The callback when a voice transcript is output. | |
items | string[] | An array of strings to use for autocomplete suggestions. | |
completion | string | A string to use for a typeahead value. | |
itemToString | (item:T) => string | A callback to convert item (object) to string. | |
itemToUrl | (item:T) => string | A callback to get/compute url from item object for results mode. | |
renderItem | (params) => React.ReactNode | A render prop function for customizing result item view. | |
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | md | The size of the combobox. |
variant | 'outline' | 'unstyled' | outline | The appearance of the combobox. |
showDropdownTips | boolean | false | Whether to show tips in the dropdown on how to navigate the options. |
showPoweredBy | boolean | true | Whether to show the "Powered by Search.io" in the dropdown. |
inputElement | { current: HTMLInputElement } | Input element to render the combobox in attach mode. | |
portalContainer | document.body | The portal container which will be the container for the combobox's dropdown. |