Combobox

value

onBlur

onChange

nextValue => setValue(nextValue)

nextValue => setValue(nextValue)

onFocus

size

mini

default

compact

large

options

[
  {label: 'AliceBlue', id: '#F0F8FF'},
  {label: 'AntiqueWhite', id: '#FAEBD7'},
  {label: 'Aqua', id: '#00FFFF'},
  {label: 'Aquamarine', id: '#7FFFD4'},
  {label: 'Azure', id: '#F0FFFF'},
  {label: 'Beige', id: '#F5F5DC'},
]

[
  {label: 'AliceBlue', id: '#F0F8FF'},
  {label: 'AntiqueWhite', id: '#FAEBD7'},
  {label: 'Aqua', id: '#00FFFF'},
  {label: 'Aquamarine', id: '#7FFFD4'},
  {label: 'Azure', id: '#F0FFFF'},
  {label: 'Beige', id: '#F5F5DC'},
]

mapOptionToString

option => option.label

option => option.label

mapOptionToNode

autocomplete

disabled

inputRefReact Ref documentation

import * as React from "react";
import { Combobox } from "baseui/combobox";

export default () => {
  const [value, setValue] = React.useState("");
  return (
    <Combobox
      value={value}
      onChange={nextValue => setValue(nextValue)}
      options={[
        { label: "AliceBlue", id: "#F0F8FF" },
        { label: "AntiqueWhite", id: "#FAEBD7" },
        { label: "Aqua", id: "#00FFFF" },
        { label: "Aquamarine", id: "#7FFFD4" },
        { label: "Azure", id: "#F0FFFF" },
        { label: "Beige", id: "#F5F5DC" }
      ]}
      mapOptionToString={option => option.label}
    />
  );
}

import * as React from "react";
import { Combobox } from "baseui/combobox";
export default () => {
  const [value, setValue] = React.useState("");
  return (
    <Combobox
      value={value}
      onChange={nextValue => setValue(nextValue)}
      options={[
        { label: "AliceBlue", id: "#F0F8FF" },
        { label: "AntiqueWhite", id: "#FAEBD7" },
        { label: "Aqua", id: "#00FFFF" },
        { label: "Aquamarine", id: "#7FFFD4" },
        { label: "Azure", id: "#F0FFFF" },
        { label: "Beige", id: "#F5F5DC" }
      ]}
      mapOptionToString={option => option.label}
    />
  );
}

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

Color

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

Color

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

Color

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

Color

Focus and inputRef

Color

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.
inputRef	ref	A ref to access the input element.
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: