Combobox

API

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.

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

API

Combobox props

Combobox exports

You can import this module like so:

import {SIZE} from 'baseui/combobox'

It exports the following components or utility functions: