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

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