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.


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.

Filtered options

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.

Async options

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.

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

Input props


Combobox props

Renders component in disabled state.
Transforms option to custom node in listbox.
Transforms option to visible string in listbox.
Callback for when input value changes.
Options to be displayed in the listbox.
Lets you customize all aspects of the component.
Defines the size of input and list items.
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: