Combobox
A Combobox is an input element paired with a list to provide suggestions to autocomplete the text. Use this component rather than Select for search inputs, city form fields, or any other instance where users may enter text that is not included in the list of provided options.
Examples
For search suggestions a combobox will likely want to filter the rendered suggestions based on the user-entered text. Use this example as a reference if the options are known to the application.
Applications will often need to fetch suggestions from from a remote API. The example below shows how to make asynchronous requests on input change to populate the listbox.
Your application may want to render some alternative content rather than simply mapping the option to a string.
Use the mapOptionToNode prop to translate the option to a React node.
Props can be provided to the composed Input through overrides. The example below shows how to provide a placeholder, but can be applied to any Input props.
API
Combobox props
| Name | Type | Description |
|---|---|---|
autocomplete | boolean | Controls if keyboard navigation should temporarily update input value. |
disabled | boolean | Renders component in disabled state. |
id | string | Id attribute. |
mapOptionToNode | function | Transforms option to custom node in listbox. |
mapOptionToString | function | Transforms option to visible string in listbox. |
name | string | Name attribute. |
onBlur | function | Callback for when input focus changes. |
onChange | function | Callback for when input value changes. |
onFocus | function | Callback for when input focus changes. |
options | array | Options to be displayed in the listbox. |
overrides | custom | Lets you customize all aspects of the component. |
size | enum | Defines the size of input and list items. |
value | string | Text displayed in the Input component. |
Combobox exports
You can import this module like so:
import {SIZE} from 'baseui/combobox'
It exports the following components or utility functions: