import Example from "../../components/example";
import Exports from "../../components/exports";
import Layout from "../../components/layout";
import Yard from "../../components/yard/index";

import comboboxYardConfig from "../../components/yard/config/combobox";

import * as ComboboxExports from "baseui/combobox";

import AsyncOptions from "examples/combobox/async-options.tsx";
import FilteredOptions from "examples/combobox/filtered-options.tsx";
import ReplacementNode from "examples/combobox/replacement-node.tsx";
import InputOverrides from "examples/combobox/input-overrides.tsx";
import Focus from "examples/combobox/focus.tsx";

export default Layout;

# Combobox

<Yard placeholderHeight={48} {...comboboxYardConfig} />

A Combobox is an input element paired with a list to provide suggestions to autocomplete the text. Use this
component rather than [Select](/components/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.

<Example title="Filtered options" path="combobox/filtered-options.tsx">
  <FilteredOptions />
</Example>

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.

<Example title="Async options" path="combobox/async-options.tsx">
  <AsyncOptions />
</Example>

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.

<Example title="Custom option node" path="combobox/replacement-node.tsx">
  <ReplacementNode />
</Example>

Props can be provided to the composed [Input](/components/input) through overrides. The example below shows how
to provide a placeholder, but can be applied to any Input props.

<Example title="Input props" path="combobox/input-overrides.tsx">
  <InputOverrides />
</Example>

<Example title="Focus and inputRef" path="combobox/focus.tsx">
  <Focus />
</Example>

<Exports
  component={ComboboxExports}
  title="Combobox exports"
  path="baseui/combobox"
/>